Material-ui: [DatePicker] Days and Years are always in Gregorian

[manishoo]

Problem description

Days and Years in DatePicker are always in Gregorian no matter what locale and DateTimeFormat you choose.

You can clearly see that in jalali it's 9 mordad 1395 and actually when you submit it chooses the right date but in the calendar it STILL shows 30th of august and the year is STILL 2016 (although it's 1395 in jalali).

BTW the direction of the month arrows are not right either.

Steps to reproduce

change locale and DateTimeFormat to (for example) jalali. so locale="fa" and DateTimeFormat={global.Intl.DateTimeFormat}

Versions

• Material-UI: 0.15.4
• React: 15.3.0
• Browser: Chrome 52.0.2743.116

[mehrdad-shokri]

I'm having the same problem. my locale is fa-IR-u-ca-persian

[oliviertassinari]

The direction of the month arrows are not right either.

We can fix it easily by removing this isRtl logic: https://github.com/callemall/material-ui/blob/master/src/DatePicker/CalendarToolbar.js#L74-L75.
Do you want to work on it?

That doesn't look quite like this native component.
But, I don't have much knowledge in this area. I note sure I can help much.

[mehrdad-shokri]

@oliviertassinari the main problem is not with direction buttons you mentioned.
The main problem is that days and month names are correct on top of calendar.
But for calendar day picker(which is the selector in the main area) the month days are still in Gregorian.
Seems like date time is converted to the provided locale on top but they are not applied to the main date picker.
I've been using moment and moment-jalali to convert Gregorian to Jalali, and think that you can use a converter to accomplish this too.
If you need more info or need to discuss more mention me.

[oliviertassinari]

the month days are still in Gregorian

Regarding this point, we need to stop using the .getDate() date method and use the Intl.DateTimeFormat API instead.

That should be easy to fix. E.g:

const date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));

console.log(new Intl.DateTimeFormat("fa-IR", {day: "numeric"}).format(date)); // ۳۰
console.log(new Intl.DateTimeFormat("en-GB", {day: "numeric"}).format(date)); // 20

[manishoo]

@oliviertassinari

console.log(new Intl.DateTimeFormat("fa-IR", {day: "numeric"}).format(date)); // ۳۰

while still being a bug, but this temporarily fixed it for me ! thanks !

[mehrdad-shokri]

@oliviertassinari got you. can provide a pr for rtl support and correct date format.

[manishoo]

@oliviertassinari The Year is also in Gregorian, how do you think I change that ?

[mehrdad-shokri]

@oliviertassinari also year select hasn't changed.