[YearPicker] Allows to revers year order

[sakulstra]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the 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

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]

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]

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]

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

@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]

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]

@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 #6759 (comment) 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.

[LukasTy]

This is already possible with the yearsOrder="desc" prop introduced by #11780.

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@sakulstra How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.