app/components/Ui/Input/DateRangePicker.vue

<template>
  <!-- @see https://vue3datepicker.com/props/modes/#multi-calendars -->
  <VueDatePicker
      :model-value="modelValue"
      range
      multi-calendars
      auto-apply
      locale="fr"
      :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"
  />
<!--  :alt-position="dateRangePickerAltPosition"-->
</template>

<script setup lang="ts">

const props = defineProps({
  modelValue: {
    type: Array,
    required: true
  },
  maxHeight: {
    type: Number,
    required: false,
    default: null
  }
})

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

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

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 rect = el.getBoundingClientRect()
  
  if ((rect.left + fullWidth + 20) > window.innerWidth) {
    xOffset = window.innerWidth - (rect.left + fullWidth + 20)
  }

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

<style scoped lang="scss">
  :deep(div[role="textbox"]) {
    height: 100% !important;
    max-height: 100% !important;
  }

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

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