(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)
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>
The issue
This is a two prong issue.
null
(actually to a date in the long distant future because of issue 2)start
orend
is null, doesn't display any range in the UI.Expected behaviour
Observed behaviour