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 {
    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>