Use React Area datepicker

[07tAnYa]

When I go to select a date for my event, I have to keep on right/left swiping to select the appropriate date.

When I hover on the year, it should show the years in a scroll-down-like structure, so that users can select easily.

Here is the screen recording of the above-discussed issue:

Add.Event.-.Google.Chrome.2024-01-19.15-43-39.mp4

[stevepiercy]

@07tAnYa we use the datetime picker as shown in https://6.docs.plone.org/storybook/?path=/story/edit-widgets-datetime--datetime.

However, there may be better datetime pickers available. I brought this up for discussion in a PLIP at plone/Products.CMFPlone#4115. I agree that clicking through it, with limited keyboard shortcuts, is bad UX and accessibility. If you have an idea for a better off-the-shelf widget, please add your comment to that issue. Thank you!

[stevepiercy]

@vikashsprem @07tAnYa we plan to implement the React Aria DatePicker.

Demo

[07tAnYa]

@vikashsprem @07tAnYa we plan to implement https://codesandbox.io/p/sandbox/affectionate-rosalind-tdm323?file=%2Fsrc%2FCalendar.js

This is really good.

[Manas-Kenge]

@stevepiercy I am now solving the issue as per https://codesandbox.io/p/sandbox/affectionate-rosalind-tdm323?file=%2Fsrc%2FCalendar.js. The problem I am facing is with react-aria package. Is it ok to install it or am I supposed to import the components from somewhere else?

[stevepiercy]

@Manas-Kenge sorry, I don't know. I do know that there is a plan to use React Aria many of the components, and away from Semantic UI. I think this issue depends on the work being done in #4352. Hopefully someone else can provide direction about implementation details. We have another meeting in a couple of weeks to review priorities for Plone 7, and I would like to see this one prioritized. Until then, I wouldn't start work on it.