Clay: DatePicker Range: The start or end date is not visible when disabled only `c-selected` is visible

[matuzalemsteles]

This has already been discovered when we were building this functionality but we left it to correct later, opening this issue so as not to lose it from our eyes.

The Problem happens when you have a defined range, be it the start or end date near the end of the month or start, when you view the next or previous month, the days are visible from the previous month, in the selected range shows but not the active state of the day selected, see the example in the image below.

The 29th is the end date. One solution for this would be to maintain the active state but with a lighter opacity to give feedback that is disabled but is also active in the previous month.

[matuzalemsteles]

cc @pat270 and @drakonux

[pat270]

I mentioned this before to Diego, but the days 25-29 are obviously selectable. Why do we disable them if we're in the next month? It makes the user switch to the previous month if they want to change the starting date to 26. Date Picker CSS has a specific class for this situation previous-month-date.

[matuzalemsteles]

@pat270 I think the color game is to avoid confusion of dates, where the days of the previous month appear in the next as a way to fill the table, this seems to be common in calendars (I see an example in the MacOS Calendar itself), neither I'm sure because we disabled it but it was a criterion of the Date Picker specification.

Date Picker CSS has a specific class for this situation previous-month-date.

Well, it wasn't very clear what this class does, sorry 😅.

[drakonux]

Yeah, I thought I answered in another thread sorry, but you are right. There is no disabled day by default on the calendar, it's just a state that can be used for disabling days.

Thus, the definition Lexicon made was wrong, we need an additional state to communicate the days that are not part of the month selected (so those days have hover and active state too and on click the month selected changes to the previous/next month except when the day is the end date of a range)

A screenshot of the WIP of the new Date Picker doc (we are still discussing the final values):

ps. I'm trying to update the Date Picker definition to provide you a more clear definition, but this task is out of our priorities now.

[github-actions[bot]]

This issue has been merged and will be released in DXP at https://issues.liferay.com/browse/LPS-130562