nathanreyes / v-calendar

An elegant calendar and datepicker plugin for Vue.
https://vcalendar.io
MIT License
4.32k stars 840 forks source link

Boundless dates do not work in range mode #1454

Open cleverplatypus opened 4 months ago

cleverplatypus commented 4 months ago

The issue

This is a two prong issue.

  1. (nice to have) there is no way to use the calendar to define an open-ended range. i solved this myself by allowing the user to double click on a day which triggers a handler that sets the range.end to null (actually to a date in the long distant future because of issue 2)
  2. the main issue is that setting range to an object where either start or end is null, doesn't display any range in the UI.
<template>
<v-date-picker 
   ref="cal"
   v-model.range="dateRange"
/>
</template>
<script lang="ts">
const dateRange = ref<{
    start: Date | null,
    end?: Date | null
}>({
    start: new Date(2024, 2, 6),
    end: null,
});
</script>

Expected behaviour

image

Observed behaviour

image