<script lang="ts" setup>
const props = defineProps(["modelValue"]);
const emit = defineEmits(['update:modelValue']);

function dateToYYYYMMDD(d: Date) : string {
  // alternative implementations in https://stackoverflow.com/q/23593052/1850609
  //return new Date(d.getTime() - (d.getTimezoneOffset() * 60 * 1000)).toISOString().split('T')[0];
  return d.toISOString().split('T')[0];
}

function updateValue(event: Event) {
  const target = event.target as HTMLInputElement;
  emit('update:modelValue', target.valueAsDate);
}
function selectAll(event: FocusEvent) {
  // Workaround for Safari bug
  // http://stackoverflow.com/questions/1269722/selecting-text-on-focus-using-jquery-not-working-in-safari-and-chrome
  setTimeout(function () {
    const target = event.target as HTMLInputElement;
    target.select()
  }, 0)
}
</script>

<template>
  <input
    type="date"
    ref="input"
    v-bind:value="dateToYYYYMMDD(modelValue)"
    @input="updateValue"
    @focus="selectAll"
  />
</template>