app/components/Ui/DatePicker.vue

<!--
Sélecteur de dates

@see https://vue3datepicker.com/
-->

<template>
  <main>
    <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')"
        :disabled="readonly"
        :position="position"
        @update:model-value="onUpdate"
    />
  </main>
</template>

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

const i18n = useI18n()

const fnsLocale = DateUtils.getFnsLocale(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
  },
  /**
   * @see https://vue3datepicker.com/props/positioning/#position
   */
  position: {
    type: String as PropType<'left' | 'center' | 'right'>,
    required: false,
    default: 'center'
  }
})

const defaultFormatPattern = props.withTime ?
    DateUtils.getFormatPattern(i18n.locale.value as supportedLocales) :
    DateUtils.getShortFormatPattern(i18n.locale.value as supportedLocales)

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>