Setting min/max property can change current month, but doesn't emit event

[gavrichards]

If you set the min or max properties of <calendar-date>, this can have the effect of automatically changing the currently showing month, because the current or default month is no longer accessible.

The problem with that is if you're rendering your own <select> elements in the header for changing the year and month, you need to know when the month/year changes, to be able to update the selected options in those elements.

As far as I can tell though, no event is emitted in this scenario, which would be ideal. Similar to "focusday".

The way I'm trying to get around this is by having a function which I call to set the max/min property, and at the same time update my <select> elements. The problem is I don't actually know what month is definitely showing, because by default the focusedDate property is undefined, and doesn't change as a result of setting the max or min properties.

Any guidance would be appreciated!

[WickyNilliams]

Can you provide a codepen or similar showing your issue? I don't have a great deal of spare time to dig into this myself at the moment, and a minimal reproduction would really help. Thanks!

[gavrichards]

Yes, no problem - here's a codepen:
https://codepen.io/gavrichards/pen/QWXPRag

It logs to a box when the focusday or change events occur, or when you click the "Log .focusedDate" button.

1. Click "Set Min to 2024-12-10"
2. Note that the calendar changes to December, but nothing is logged
3. Tab around and see that the 10th receives focus
4. Click the "Clear Min" button
5. Note that the calendar changes back to September, but still nothing is logged
6. Click the "Log .focusedDate" button and note that the value is remains undefined

You can also navigate to October and see the focusday event is emitted, but still setting the min and clearing it doesn't emit anything, despite changing the calendar to December and then back to October.

I hope this is useful, and thank you for your time.

[gavrichards]

I've been digging into the code, specifically CalendarDate and useCalendarBase.
What I think I've learnt is that the current showing month could be deduced by using in order of availability: focusedDate, then value, then today, and then "clamping" that to between min and max.
In which case I can probably replicate that in my own code which wraps the calendar component.

It would be great if the calendar emitted a focusedDate (focusday event) which took into account the min and max though.

Thank you!

[WickyNilliams]

Thanks! I'll take a look at this later in the week and try to find a reasonable solution.

I'm not overly keen on firing events, since they are generally reserved for user initiated changes not programmatic changes. But it may be the only option here. Will keep you posted!