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"
        @update:model-value="$emit('update:modelValue', $event)"
      />
  </div>
</template>

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

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>