How to unset focused date, or not have it set to today's date by default

[chipit24]

The docs at https://zagjs.com/components/vue/date-picker#setting-the-focused-date mention:

The datepicker's focused date is set to either the first selected date or today's date by default.

How can I not have any date focused initially?

[segunadebayo]

That's interesting. If you had that feature, What date should the calendar then show when it's opened?

[chipit24]

So, I'm using the date picker via Ark UI with Vue 3 to build a date range input, and I noticed that the [data-focus] attribute is applied to the date that I'm hovering over after selecting the starting date. So I wanted to use that state to style the end date the same as the selected start date, even before selecting the final end date, e.g.:

Having the current date also be the focused date made the styling very difficult though—but I found a workaround so this feature isn't as important anymore.

What date should the calendar then show when it's opened?

It should default to the current date, as it does now, but when the calendar is showing a "month view" like in the example above, it would be nice to not have a date focused by default (I'm also not 100% what it means for the date to be focused, and how it differs from other existing attributes like [data-today] and [data-selected]).

[anubra266]

@chipit24 Do you mean you'd like it to visually not have any dates highlighted?

[chipit24]

Yeah, pretty much! But after posting this I worked out how to get the styling I wanted:

• I scoped all styles to [data-scope="date-picker"][data-part="table-cell-trigger"].
• I used &[data-in-range] to highlight the dates between the start and end dates.
• I then used &[data-in-range]:hover and &[data-selected] to provide a darker highlight to the start and end dates.
  • I gave &[data-in-range]:hover a right border radius to differentiate it from &[data-range-start] which has a left border radius.