app/components/Ui/DatePicker.vue

<!--
Sélecteur de dates

@see https://vuetifyjs.com/en/components/date-pickers/
-->

<template>
  <main>
    <!-- @see https://vue3datepicker.com/props/modes/#multi-calendars -->
    <VueDatePicker
        :model-value="modelValue"
        :locale="i18n.locale.value"
        :format-locale="fnsLocale"
        :format="dateFormat"
        :enable-time-picker="withTime"
        :teleport="true"
        text-input
        :auto-apply="true"
        :select-text="$t('select')"
        :cancel-text="$t('cancel')"
        @update:model-value="onUpdate"
    />
  </main>
</template>

<script setup lang="ts">
import {computed} from "@vue/reactivity";
import DateUtils, {supportedLocales} from "~/services/utils/dateUtils";
import {PropType} from "@vue/runtime-core";

const i18n = useI18n()

const fnsLocale = DateUtils.getFnsLocale(i18n.locale.value as supportedLocales)
const defaultFormatPattern = DateUtils.getFormatPattern(i18n.locale.value as supportedLocales)

const props = defineProps({
  modelValue: {
    type: Object as PropType<Date>,
    required: false,
    default: null
  },
  readonly: {
    type: Boolean,
    required: false,
    default: false
  },
  format: {
    type: String,
    required: false,
    default: null
  },
  withTime: {
    type: Boolean,
    required: false,
    default: false
  }
})

const dateFormat: Ref<string> = ref(props.format ?? defaultFormatPattern)

const emit = defineEmits(['update:model-value'])

const onUpdate = (event: Date) => {
  emit('update:model-value', event)
}

</script>

<style scoped>

</style>