app/components/Ui/DateRangePicker.vue

<template>
  <!-- @see https://vue3datepicker.com/props/modes/#multi-calendars -->
  <VueDatePicker
      :model-value="modelValue"
      range
      multi-calendars
      :auto-apply="autoApply"
      :locale="i18n.locale.value"
      :format-locale="fnsLocale"
      :format="dateFormatPattern"
      :start-date="today"
      :teleport="true"
      :alt-position="dateRangePickerAltPosition"
      :enable-time-picker="false"
      close-on-scroll
      text-input
      :select-text="$t('select')"
      :cancel-text="$t('cancel')"
      input-class-name="date-range-picker-input"
      @update:model-value="updateDateTimeRange"
      class="date-range-picker"
      :style="style"
  />
</template>

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

const props = defineProps({
  modelValue: {
    type: Array as PropType<Array<Date> | null>,
    required: false,
    default: null
  },
  maxHeight: {
    type: Number,
    required: false,
    default: null
  }
})

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

const autoApply = false

const updateDateTimeRange = (value: [string, string]) => {
  emit('update:modelValue', value)
}

const i18n = useI18n()

const fnsLocale = DateUtils.getFnsLocale(i18n.locale.value as supportedLocales)
const dateFormatPattern = DateUtils.getShortFormatPattern(i18n.locale.value as supportedLocales)

const today = new Date()

let style = '';
if (props.maxHeight !== null) {
  style += 'height: ' + props.maxHeight + 'px;max-height: ' + props.maxHeight + 'px;'
}

/**
 * Recalcule la position du panneau de sélection des dates si trop près du bord droit de l'écran
 * @param el
 */
const dateRangePickerAltPosition = (el: HTMLElement) => {
  let xOffset = 0
  const fullWidth = 500
  const rightPadding = 30
  const rect = el.getBoundingClientRect()

  if ((rect.left + fullWidth + rightPadding) > window.innerWidth) {
    xOffset = window.innerWidth - (rect.left + fullWidth + rightPadding)
  }

  return {
    top: rect.bottom,
    left: rect.left + xOffset
  }
}
</script>

<style 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-range-picker {
    div[role="textbox"] {
      height: 100% !important;
      max-height: 100% !important;
    }

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

    .date-range-picker-input {
      height: 100% !important;
      max-height: 100% !important;
    }
  }
</style>