<script setup lang="ts">
const emit = defineEmits<(e: "input"|"change", value: Date) => void>();

const date = defineModel<Date>({ required: true });

function onInput(event: Event) {
    const inputValue = (event.target as HTMLInputElement).value;
    date.value =  new Date(inputValue);
    emit('input', date.value);
}

function onChange(event: Event) {
    const inputValue = (event.target as HTMLInputElement).value;
    date.value =  new Date(inputValue);
    emit('change', date.value);
}
</script>

<template>
    <input
        :value="date.toISOString().substring(0, 10)"
        type="date"
        @input="onInput"
        @change="onChange"
    />
</template>
