<template>
  <input
    type="date" v-model="valueStr" :readonly="readonly"
    min="0001-01-01" max="9999-12-31"
  />
</template>
    
<script>
import { Date } from '@silane/datetime';


export default {
  name: 'InputDate',
  props: {
    modelValue: {
      type: Date,
      default: null,
    },
    readonly: {
      type: Boolean,
      default: false,
    }
  },
  computed: {
    valueStr: {
      get() {
        return this.modelValue === null ? '' : this.modelValue.isoFormat();
      },
      set(newValue) {
        let val = null;
        if(newValue !== '')
          val = Date.fromISOFormat(newValue);
        if(val === this.modelValue) return;
        this.$emit('update:modelValue', val);
      }
    }
  }
}
</script>
