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>