Comment implémenter le sélecteur de plage de dates dans Vue ?

<template>
  <div>
    <date-selector v-model="startDate"></date-selector>
    <date-selector v-model="endDate"></date-selector>
  </div>
</template>

<script>
import DateSelector from './DateSelector.vue'

export default {
  components: {
    DateSelector
  },
  data () {
    return {
      startDate: '',
      endDate: ''
    }
  }
}
</script>

<template>
  <div class="date-selector">
    <input :value="dateString" @blur="handleChange" @keydown.enter="handleChange">
    <svg @click="showCalendar" class="icon icon-calendar">
      <use xlink:href="#calendar" />
    </svg>
    <div v-if="show" class="date-calendar">
      <calendar :date="date" @change="updateDate"></calendar>
    </div>
  </div>
</template>

<script>
import Calendar from './Calendar.vue'

export default {
  components: {
    Calendar
  },
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      date: new Date(),
      show: false
    }
  },
  computed: {
    dateString () {
      return this.value || ''
    }
  },
  methods: {
    handleChange (event) {
      const dateString = event.target.value.trim()
      if (dateString) {
        const date = new Date(dateString)
        if (!isNaN(date.getTime())) {
          this.date = date
        }
      }
      this.$emit('input', dateString)
    },
    showCalendar () {
      this.show = true
    },
    updateDate (date) {
      this.date = date
      this.show = false
      this.$emit('input', this.date.toISOString().slice(0, 10))
    }
  }
}
</script>

<template>
  <div class="calendar">
    <div class="calendar-header">
      <button class="calendar-btn" @click.prevent="prevMonth">&lt;</button>
      <span class="calendar-month">{{month}} {{year}}</span>
      <button class="calendar-btn" @click.prevent="nextMonth">&gt;</button>
    </div>
    <table>
      <thead>
        <tr>
          <th>Sun</th>
          <th>Mon</th>
          <th>Tue</th>
          <th>Wed</th>
          <th>Thu</th>
          <th>Fri</th>
          <th>Sat</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="week in weeks" :key="week">
          <td v-for="date in week" :key="date" @click.prevent="updateDate(date)">
            <div :class="{ 'calendar-date': true, 'calendar-date--selected': isDateSelected(date), 'calendar-date--disabled': isDateDisabled(date) }">{{date.getDate()}}</div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  props: {
    date: Date
  },
  data () {
    return {
      year: this.date.getFullYear(),
      month: this.date.toLocaleString('default', { month: 'long' }),
      selectedDate: this.date
    }
  },
  computed: {
    weeks () {
      const weeks = []
      const firstDayOfMonth = new Date(this.year, this.date.getMonth(), 1)
      const lastDayOfMonth = new Date(this.year, this.date.getMonth() + 1, 0)
      const daysInMonth = lastDayOfMonth.getDate()
      const firstDayOfWeek = firstDayOfMonth.getDay()
      let week = []
      for (let i = 0; i < firstDayOfWeek; i++) {
        week.push(new Date(this.year, this.date.getMonth(), i - firstDayOfWeek + 1))
      }
      for (let i = 1; i <= daysInMonth; i++) {
        week.push(new Date(this.year, this.date.getMonth(), i))
        if (week.length === 7) {
          weeks.push(week)
          week = []
        }
      }
      if (week.length > 0) {
        for (let i = week.length; i < 7; i++) {
          week.push(new Date(this.year, this.date.getMonth() + 1, i - firstDayOfWeek + 1))
        }
        weeks.push(week)
      }
      return weeks
    }
  },
  methods: {
    prevMonth () {
      if (this.date.getMonth() === 0) {
        this.year--
        this.month = 'December'
      } else {
        this.month = this.date.toLocaleString('default', { month: 'long', monthIndex: 'numeric' })
      }
      this.date.setMonth(this.date.getMonth() - 1)
    },
    nextMonth () {
      if (this.date.getMonth() === 11) {
        this.year++
        this.month = 'January'
      } else {
        this.month = this.date.toLocaleString('default', { month: 'long' })
      }
      this.date.setMonth(this.date.getMonth() + 1)
    },
    isDateSelected (date) {
      return date.toDateString() === this.selectedDate.toDateString()
    },
    isDateDisabled (date) {
      return date.getMonth() !== this.date.getMonth()
    },
    updateDate (date) {
      if (!this.isDateDisabled(date)) {
        this.selectedDate = date
        this.$emit('change', date)
      }
    }
  }
}
</script>