<script>
let date1 = "2024-01-01";
let date2 = "2024-01-02";
</script>
<p>date1: <input type="date" bind:value={date1} max="9999-12-31" /></p>
<p>date2: <input type="date" value={date2} max="9999-12-31" /></p>
이렇게 만들면 bind:value
가 걸린 필드에 2023.01.01
을 입력하려할 때 월/일
에 0을 입력하면 기존에 입력된 내용이 사라진다.
github에 물어봐도, 이미 2022년에 누가 고쳐달라고 올린 이슈가 있던데 아직도 안 고쳐진걸로 봐선 시간이 걸릴 것 같아서 컴포넌트로 만들었다.
<script>
import { createEventDispatcher } from "svelte";
export let value;
export let type = "date";
export let max = "9999-12-31";
export { _class as class };
let _class = "";
let downedKey;
const handleKeyDown = (event) => {
downedKey = event.key;
dispatch("keydown", event);
};
const handleChanged = (event) => {
const newValue = event.target.value;
if (downedKey === "Backspace" || downedKey === "Delete" || newValue) {
value = newValue;
dispatch("change", event);
}
};
</script>
<input
{type}
{value}
{max}
on:keydown={handleKeyDown}
on:change={handleChanged}
class=" {_class}"
/>
이렇게 하면 백스페이스나 삭제버튼을 눌러서 지운게 아니면 데이터가 날아가지 않게 된다.
테스트는 여기서 해볼 수 있다.
https://svelte.dev/repl/301e4f0596534cfe90b5f72eb22d09ae?version=4.2.8