app/components/Ui/DatePicker.vue

<!--
Sélecteur de dates

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

<template>
  <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"
    :dark="isDark"
    :select-text="$t('select')"
    :cancel-text="$t('cancel')"
    input-class-name="date-picker-input"
    @update:model-value="emit('update:modelValue', $event)"
  />
</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'
import { useTheme } from 'vuetify'

const emit = defineEmits(['update:modelValue'])

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 theme = useTheme()

const isDark = computed(() => theme.global.current.value.dark)

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

const dateFormatPattern: ComputedRef<string> = computed(() =>
  props.withTimePicker ? DateUtils.getFormatPattern(locale.value as supportedLocales) : 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;
}

:deep(.date-picker-input) {
  background-color: rgb(var(--v-theme-surface)) !important;
  color: rgb(var(--v-theme-on-surface)) !important;
  border: 1px solid rgb(var(--v-theme-neutral)) !important;
  border-radius: 4px !important;

  &:hover {
    border-color: rgb(var(--v-theme-on-surface)) !important;
  }

  &:focus {
    border: 2px solid rgb(var(--v-theme-primary)) !important;
    outline: none !important;
  }
}

:deep(.dp__menu) {
  background-color: rgb(var(--v-theme-surface)) !important;
  color: rgb(var(--v-theme-on-surface)) !important;
  border: 1px solid rgb(var(--v-theme-neutral)) !important;
}

:deep(.dp__calendar_header) {
  background-color: rgb(var(--v-theme-surface)) !important;
  color: rgb(var(--v-theme-on-surface)) !important;
}

:deep(.dp__cell_inner) {
  color: rgb(var(--v-theme-on-surface)) !important;
}

:deep(.dp__action_cancel) {
  background-color: rgb(var(--v-theme-neutral)) !important;
  color: rgb(var(--v-theme-on-neutral)) !important;
}
</style>