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"
    :select-text="$t('select')"
    :cancel-text="$t('cancel')"
    input-class-name="date-picker-input"
    class="date-picker"
    :style="style"
    @update:model-value="$emit('update:modelValue', $event)"
  />
</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,
  },
  maxHeight: {
    type: Number,
    required: false,
    default: null,
  },
  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()

let style: ComputedRef<string> = computed(
  () => props.maxHeight !== null ? 'height: ' + props.maxHeight + 'px;max-height: ' + props.maxHeight + 'px;' : ''
)
</script>

<style scoped lang="scss">
// @see https://vue3datepicker.com/customization/theming/
// [!] Sass variables overriding does not work in scoped mode
.dp__theme_light,
.dp__theme_dark {
  --dp-background-color: #ffffff;
  --dp-text-color: #212121;
  --dp-hover-color: #f3f3f3;
  --dp-hover-text-color: #212121;
  --dp-hover-icon-color: #959595;
  --dp-primary-color: rgb(var(--v-theme-primary)) !important;
  --dp-primary-text-color: rgb(var(--v-theme-on-primary)) !important;
  --dp-secondary-color: rgb(var(--v-theme-neutral-strong)) !important;
  --dp-border-color: #ddd;
  --dp-menu-border-color: #ddd;
  --dp-border-color-hover: #aaaeb7;
  --dp-disabled-color: #f6f6f6;
  --dp-scroll-bar-background: #f3f3f3;
  --dp-scroll-bar-color: #959595;
  --dp-success-color: rgb(var(--v-theme-success)) !important;
  --dp-success-color-disabled: rgb(var(--v-theme-neutral-strong)) !important;
  --dp-icon-color: #959595;
  --dp-danger-color: #ff6f60;
  --dp-highlight-color: rgba(25, 118, 210, 0.1);
}

.date-picker {
  div {
    height: 100% !important;
    max-height: 100% !important;
  }

  .dp__input_wrap {
    height: 100% !important;
    max-height: 100% !important;
  }

  .date-picker-input {
    height: 100% !important;
    max-height: 100% !important;
  }

  :deep(.dp__active_date) {
    border-radius: 12px;
  }

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


</style>