After working with the components, here are a few ideas I think could improve them and provide a much better UX in some scenarios.
Calendar
Add the ability to select a single date
When selecting a date range, give a visual feedback that the selection is an actual range instead of seeing two selected dates. Even on the design site, you can’t visually tell that the selection is a range. It just looks like I selected two dates.
An idea would be that after a first selection, there would be a visual indicator while you hover to show the range about to be selected (highlighting in-between dates). Then, once the selection is done, highlight dates between the start and end of my selection.
Add the ability to highlight (bold?) some dates, instead of disabling them. The idea is that you could want to highlight some dates that have matching data, as opposed to disabling the dates that have no matching data.
Date select
Add a month change event, like the one Calendar has. This would help dynamically load records that match the visible range.
From looking at the component it does only accept a single date, with the faded highlighted one representing the previously selected value. I agree they’re too similar and very easily confused.
Add a month change event, like the one Calendar has.
From looking at the component it does only accept a single date, with the faded highlighted one representing the previously selected value. I agree they’re too similar and very easily confused.
Yes, I had the feeling the base behavior was to select a range but very awkwardly. I then realized there was some form of “last selected date” concept which isn’t too clear what the purpose is considering it could be used to select a range of dates. But that isn’t the calendar’s default behavior, even if it keeps the last selected date highlighted.
In a basic use case of using the calendar to select a date, the last selected date doesn’t have its place.
I now force the “last selected date” to stop working by forcefully passing an empty array to the previouslySelected prop.
previouslySelected={[]}
Which prop are we talking about? I only see onChange in the docs:
The suggestion was to replicate the Calendar component’s onChange prop which is called when the calendar is navigated to the DatePicker component when its internal calendar is navigated. The same could be provided to the DateTimePicker component for consistency’s sake.
