Unable to highlight a disabled date

[Ben-Kemp-8433]

For our application I created a daterange selector using these datepickers.

The start date should always be before the end date and vice-versa, therefore the respective opposite date has to be disabled. Adding the respective dates into the disabledDates object does exactly as it's supposed to, everything after the end date is disabled on the start datepicker and the opposite is true for the end datepicker. All good so far.

Now, with v-model I can give the start date to the start datepicker and pass the end date into the highlighted="{to: date.end}". The same is true for the end datepicker v-model getting date.end and highlighted="{from: date.start}".

What ends up being the issue is that the date.start highlight doesn't show up on the end datepicker, while the start datepicker gets its highlight-end like I'd expect. The highlight-start class doesn't show up on the from entry in the highlighted object.

I have tried adding includeDisabled: true in the highlighted object with no luck.

Would anyone be able to help me with this conundrum? If I need to provide some code from my components I can do that too.

[shubhadip]

can you provide the props that you are passing to the datepicker

[Ben-Kemp-8433]

Start datepicker

v-model="date.start"
:inline="true"
:language="appLocale"
:openDate="date.start"
:disabledDates="{
    from: date.end
}"
:highlighted="{
    from: date.start,
    to: date.end,
    includeDisabled: true
}"
:preventDisableDateSelection="true"
:fullMonthName="true"
:mondayFirst="true"

End datepicker

v-model="date.end"
:inline="true"
:language="appLocale"
:openDate="date.end"
:disabledDates="{
    to: date.start
}"
:highlighted="{
    from: date.start,
    to: date.end,
    includeDisabled: true
}"
:preventDisableDateSelection="true"
:fullMonthName="true"
:mondayFirst="true"

In both cases the date object is the same

date: {
    start: // tomorrow
    end: // day after tomorrow
}

In our codebase the start and end dates are fetched from our API, but the comments are what it's supposed to be.

[shubhadip]

is this correct interpretation of what you are saying : https://stackblitz.com/edit/vue-bmbjpa?file=src%2FApp.vue

[Ben-Kemp-8433]

Thanks for the quick response!

It's close, but I've found how to replicate my issue.

If you replace the date in your setup with:

    const date = ref({
      start: new Date(),
      end: new Date('2023-12-25'),
    });

With these settings, you'll see that today is not .highlight-start in either datepicker, while I'd expect it to be considering it's set to be the from of the highlighted object.

[Ben-Kemp-8433]

I noticed in your example that setting the date implicitly did work, i.e. new Date('2023-12-15').

It got me thinking and found a workaround. instead of using new Date() I used new Date(new Date().toDateString()) which does seem to work, even if it does new up Date twice.