adobe
Inconsistent Calendar Display in Date Picker: UX Issue with Month Navigation.
Provide a general summary of the issue here
The date picker's calendar currently only pads the remaining days of the first and last week of a month. This results in a UX problem when switching between months using buttons. The calendar's next/prev button displacing up and down causes inconvenience, since some months span five weeks while others span up to six weeks.
🤔 Expected Behavior?
The date picker's calendar should maintain a consistent layout and size when switching between months, regardless of the number of weeks each month spans.
😯 Current Behavior
💁 Possible Solution
Setting a fix height to calendar's is the only solution for now. Which does leave a bottom blank space for certain months. A possible solution is to pad an extra week at the end, if the total weeks of the current month are only five.
🔦 Context
No response
🖥️ Steps to Reproduce
Version
react-aria-components: ^1.0.0-rc.0
What browsers are you seeing the problem on?
Firefox, Chrome, Safari, Microsoft Edge
If other, please specify.
No response
What operating system are you using?
Window, MacOs
🧢 Your Company/Team
No response
🕷 Tracking Issue
No response
@YakuBrangJa
I tested the following link and it appears that the year and month are fixed.
- https://react-spectrum.adobe.com/react-aria/DatePicker.html#example
- https://react-spectrum.adobe.com/react-aria/examples/datepicker.html
Does this not solve the problem?
It also seems to be designed in such a way that elements outside of the visible range cannot be selected, so there may be no need to force non-interactive elements to be visible. see: https://github.com/adobe/react-spectrum/issues/3257#issuecomment-1644757484
However, I also feel that native calendars such as Chrome and Safari are easier to use in that they have a consistent height and a consistent 6-week view. I think there is room for consideration.
ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date
This seems like a duplicate of https://github.com/adobe/react-spectrum/issues/4789
@YakuBrangJa
I tested the following link and it appears that the year and month are fixed.
- https://react-spectrum.adobe.com/react-aria/DatePicker.html#example
- https://react-spectrum.adobe.com/react-aria/examples/datepicker.html
Does this not solve the problem?
It also seems to be designed in such a way that elements outside of the visible range cannot be selected, so there may be no need to force non-interactive elements to be visible. see: #3257 (comment)
However, I also feel that native calendars such as Chrome and Safari are easier to use in that they have a consistent height and a consistent 6-week view. I think there is room for consideration.
ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date
Yes, this issue exits only when the calendar popover is positioned at top. The issue exit on the examples you provided too.