search

mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
4.07k stars 1.26k forks source link

[YearPicker] Allows to revers year order #6759

Open sakulstra opened 1 year ago

sakulstra commented 1 year ago

Duplicates

Latest version

Summary 💡

It would be great if i was able to render years in the opposite direction (new to old).

Examples 🌈

In an app i'm currently working on we need peoples birthday, and expect them to be between 18 and 90 years old. When setting DatePicker minDate and maxDate accordingly the input will render sth like image

Which is a bit weird as I'd expect the sorting to be the other way around. Therefore it would be nice if i could supply a flag or add some custom behavior for the Year selection.

On a sidenote, when selecting sth like a "birthday", there's not really any need for a DateLibrary, as the output date is not a "real date" bot more of a time-zone unaware string. I think there's no way to actually use this ui component without a date library, but would be good if there was.

Motivation 🔦

Currently this input is confusing for users as they have to scroll a lot.

Order ID 💳 (optional)

No response

alexfauquette commented 1 year ago

About birthdays, pickers are not the best options. We have an issue on this topic if you're interested in: #5021

I tried to do a CSS revert, but it's breaking the keyboard navigation. The modification will have to be done by a prop in the YerPicker

flaviendelangle commented 1 year ago

Currently this input is confusing for users as they have to scroll a lot.

In the last versions, I think we are automatically scrolling to today's year, which solves this part of the problem.

sakulstra commented 1 year ago

@alexfauquette thx for the comment. After reading this seems like a good idea to me to just change to 3 inputs :sweat_smile:

@flaviendelangle I think this feature doesn't work very well. When your min/max range don't include the current year the "topbar" will show the current year which is not selectable (like in the screenshot above) and nothing will be selected/scrolled.

flaviendelangle commented 1 year ago

When your min/max range don't include the current year the "topbar" will show the current year which is not selectable (like in the screenshot above) and nothing will be selected/scrolled.

In which case do you have a selected year that is not selectable ? We might not handle this use case correctly indeed

sakulstra commented 1 year ago

@flaviendelangle In the example above i have

minDate={dayjs().subtract(90, 'years')}
maxDate={dayjs().subtract(18, 'years')}

Which I think will via useNow https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/internals/hooks/useUtils.ts#L49 default to the current Year which is why in the screenshot provided above https://github.com/mui/mui-x/issues/6759#issue-1437435648 although the current Year is not within the selectable range has 2022 in the "topbar". And as 2022 is selected, the autoscroll doesn't work as there's no 2022 to scroll to.