Open parthlashkari opened 1 year ago
I have tested it on chrome and edge
Hi,
@material-ui/pickers
is not a package created and maintained by our team.
It has been deprecated in favor of the new @mui/x-date-pickers
package that we are maintaining and that should support RTL correctly.
So please help me find the correct person to report this issue, because this is known issue in all newer versions as well
On Mon, 12 Jun, 2023, 5:29 pm Flavien DELANGLE, @.***> wrote:
Hi,
@material-ui/pickers is not a package created and maintained by our team. It has been deprecated in favor of the new @mui/x-date-pickers package that we are maintaining and that should support RTL correctly.
— Reply to this email directly, view it on GitHub https://github.com/mui/mui-x/issues/9317, or unsubscribe https://github.com/notifications/unsubscribe-auth/ALQBW7GUJSWLC7CXD4SIMHTXK4ADBANCNFSM6AAAAAAZAVSVMM . You are receiving this because you authored the thread.Message ID: @.***>
The package is not maintained any more, see there NPM page
Then, please get it corrected in latest version of mui-x-datepicker
the new @mui/x-date-pickers package that we are maintaining and that should support RTL correctly.
I said it should work
Please look here it isn't working in mui-x-datepickers also https://codesandbox.io/s/frosty-tamas-llfchy?file=/demo.tsx
I have given inputFormat as dd/MMM/yyyy but i am getting dd/yyyy/MMM as output after giving direction:rtl
Two issues here
Here is a working example: https://codesandbox.io/s/peaceful-mayer-6rqmwk?file=/demo.tsx
But see your placeholder is coming with 4 M's instead of 3 M's and after applying direction:rtl you reading date still from left to right "13/Jun/2023" but i need it as "2023/Jun/13", so what should i do , please help
Because in arabic language , they read from right to left
your placeholder is coming with 4 M's instead of 3 M's
You can find the documentation about the placeholder here.
For the direction, @alexfauquette could you have a look please, I might be missing something on my Codesandbox
The problem comes from the missing space.
We took the assumption that if there is no space, it's a single type of element. So DD/MMM/YYYY
is interpreted s a block of digits (so displayed from LTR). You should use DD MMM YYYY
to get in the correct order.
https://codesandbox.io/s/nifty-davinci-t66pff?file=/demo.tsx
Se for example default formats from date-fns-jalali in fa-IR locale. The difgits only are linked and in the correct order yyyy/mm/dd
and words are splited with spaces
@flaviendelangle Is their a specific reason to keep this issue in material-ui repo?
Since we are now talking about the new package, no => transferred :+1:
@parthlashkari Did add space solved your issue?
But see your placeholder is coming with 4 M's instead of 3 M's and after applying direction:rtl you reading date still from left to right "13/Jun/2023" but i need it as "2023/Jun/13", so what should i do , please help
Hi @parthlashkari, I'm having the same issue. I have my format as "DD/MMM/YYYY" but the UI is showing "DD/MMMM/YYYY". Were you able to find how to fix this?
@alexfauquette @flaviendelangle Hey, sorry to ping you on this old issue, but I'm also seeing strange behavior around this.
We're using @mui/x-date-pickers/AdapterLuxon
and as far as I can see, the format used by for instance the date picker is D
(Luxon for localized numeric date
). This however results in the following (Arabic locale using RTL):
format="D"
(default)
Using spaces in the format as suggested above by @alexfauquette
Using the same format but without spaces
And with a format displaying the month as a full name
Looking at the Luxon adapter, it seems like the default of using D
comes from here https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/AdapterLuxon/AdapterLuxon.ts#L75
It also uses expandFormat()
to get the format: https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/AdapterLuxon/AdapterLuxon.ts#L231
However, that doesn't result in the space delimited formatting that the picker needs:
DateTime.expandFormat('D', { locale: 'ar' })
d/M/yyyyy
DateTime.parseFormatForOpts(DateTime.DATE_FULL, { locale: 'ar' })
d MMMM yyyyy
What is the correct behavior here? I'm not saying parseFormatForOpts
should be used instead, I don't know Luxon that well.
Also for what purpose does it need the spaces to break up the format? The "move cursor by keyboard to the next item" works just fine anyway, is it the RTL part that needs it? I haven't even tested the date time picker :joy:
I can confirm that it's broken on luxon too
By the way, demos in https://mui.com/x/react-date-pickers/calendar-systems/ seems to also have a broken keyboard navigation.
@alexfauquette This is also a really strange one. Try highlighting a field in the date and hit arrow up/down. The field which has no format
prop works fine, but if there's a format
it will fail parsing, due to the year being in non-arabic numbers?
Error: {
"reason": "unparsable",
"explanation": "the input \"2025 ٠٨ ٢٩\" can't be parsed as format yyyy MM dd"
}
I found this issue but it doesn't seem to help (setting the numberingSystem
).
https://github.com/moment/luxon/issues/1120#issuecomment-1458234682
https://codesandbox.io/p/sandbox/little-surf-szg5ky?file=/src/Demo.tsx:17,21
@alexfauquette @flaviendelangle Here's another example, with the DatetimePicker component and both Luxon and Dayjs, interestingly, the picker seem to cause the same error when using Arabic numerals:
Duplicates
Latest version
Steps to reproduce 🕹
CodeSandBox Link-
Steps:
1.https://codesandbox.io/s/material-demo-forked-gym2hf?file=/demo.js
Current behavior 😯
I needed direction:"rtl" for arabic language but as i used dateformat "DD/MMM/YYYY" it is giving me output as MMM/DD/YYYY and also if you use keyboarddatepickertime with HH:mm then it is giving date in the format MMM/YYYY, HH:mm/DD, i also tried to raise this issue on mui/pickers github but they have made the repository as public. Please help.
Expected behavior 🤔
I need exact DD/MMM/YYYY format as well as for DD/MMM/YYYY, HH:mm if igivng direction:"rtl"
Context 🔦
I was making website which is supportive for arabic language also so for that i needed direction:"rtl" on this date format
Your environment 🌎
``` Don't forget to mention which browser you used. Output from `npx @mui/envinfo` goes here. ```npx @mui/envinfo