app/components/Ui/DatePicker.vue

<!--
Sélecteur de dates

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

<template>
  <div class="date-picker">
    <VueDatePicker
      :model-value="modelValue"
      :locale="locale"
      :format="dateFormatPattern"
      :format-locale="fnsLocale"
      :range="range"
      :multi-calendars="range"
      :enable-time-picker="withTimePicker"
      :auto-apply="autoApply"
      :auto-position="true"
      :start-date="today"
      close-on-scroll
      text-input
      :readonly="readonly"
      position="left"
      :teleport="true"
      :select-text="$t('select')"
      :cancel-text="$t('cancel')"
      input-class-name="date-picker-input"
      class="mb-6"
      @update:model-value="$emit('update:modelValue', $event)"
    />
  </div>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import type { PropType } from 'vue'
import type { Locale } from 'date-fns'
import type { supportedLocales } from '~/services/utils/dateUtils';
import DateUtils from '~/services/utils/dateUtils'

const props = defineProps({
  modelValue: {
    type: Object as PropType<Date | Array<Date> | null>,
    required: false,
    default: null,
  },
  range: {
    type: Boolean,
    default: false,
  },
  withTimePicker: {
    type: Boolean,
    default: false,
  },
  autoApply: {
    type: Boolean,
    default: true,
  },
  readonly: {
    type: Boolean,
    default: false,
  },
})

const i18n = useI18n()

const locale: Ref<string> = i18n.locale

const fnsLocale: ComputedRef<Locale> = computed(() =>
  DateUtils.getFnsLocale(locale.value as supportedLocales),
)

const dateFormatPattern: ComputedRef<string> = computed(() =>
  DateUtils.getShortFormatPattern(locale.value as supportedLocales),
)

const today = new Date()
</script>

<style lang="scss">
:deep(.dp__active_date) {
  border-radius: 12px;
}

:deep(.dp__today) {
  border-radius: 12px;
  border: 1px solid rgb(var(--v-theme-neutral-strong)) !important;
}

:deep(.dp__action_button) {
  height: 32px;
}
</style>