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/
3.95k stars 1.21k forks source link

[pickers] Usage with various calendars (Hijri, Hebrew, Chinese, ...) #5290

Closed Nefcanto closed 2 years ago

Nefcanto commented 2 years ago

Duplicates

Latest version

Summary 💡

As a user who wants to use DatePicker I need to see more examples and clearer explanations.

For example, I want to use hijri calendar, but I don't want to use moment.js because it's an old library with old design and their official recommendation is that we should not use them for our new projects.

Based on your current docs we should use @date-io to abstract adapters.

However, when I install @date-io/hijri, the project won't compile and needs moment-hijri which in turn might need moment.js.

What should I do if I want to use day.js for the purpose of date mapping?

This is not clear in your documentation.

Examples 🌈

In the current docs there is only one example of how to localize MUI DatePicker for Jalali calendar. That's it. No more examples. What if we want to change it to Hebrew? How about the Chinese calendar?

What should we do if we can't find a calendar there? Where to search? What to do?

Please provide more examples there.

Motivation 🔦

A website design company that works for many customers across the globe, needs to support different locales.

While it's true that a library like MUI can not possibly support all locales, it's required to be clear on its borders and scope.

For example, a simple table can be created to show the list of locales supported and for each one a simple example can be given.

This way, users won't be puzzled.

flaviendelangle commented 2 years ago

As you saw, our date picker uses date-io to abstract the various date management libraries Date io has a list of adapters (you can find it here https://github.com/dmtrKovalenko/date-io/tree/master/packages).

An adapter is a small package that uses a date management library and provide a unified api that our date picker can use without caring about the actual date management library.

If I understood correctly, you want to use a modern date management library (not moment) that supports the hijri calendar (and potentially others like chinese or hibrew in the future).

So the first step would be to find a date management library supporting hijri (other than moment). Then create an adapter for date-io that uses this date management library (for this step we can of course help you).

SIde note: I would be in favor of renaming jalali => moment-jalali and hijri => moment-hijri to be very clear about which date management libraries are used.

Side note n°2: We could probably add a doc section about this topic.

@alexfauquette

Nefcanto commented 2 years ago

@flaviendelangle, your explanation is exactly what I mean to be added to MUI docs.

Your explanation made it much clearer. You can even extend it. Now I have a better understanding of what should I search for.

Thank you.