[pickers] Using mui-pickers keyboardatepicker/keyboardatetimepicker, if giving direction:"rtl" then date format "dd/MMM/yyyy" giving wrong date format as "MMM/yyyy/dd"

[parthlashkari]

Duplicates

• I have searched the existing issues

Latest version

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

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

[parthlashkari]

I have tested it on chrome and edge

[flaviendelangle]

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.

[parthlashkari]

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 <#9317>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ALQBW7GUJSWLC7CXD4SIMHTXK4ADBANCNFSM6AAAAAAZAVSVMM> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[flaviendelangle]

The package is not maintained any more, see there NPM page

[parthlashkari]

Then, please get it corrected in latest version of mui-x-datepicker

[flaviendelangle]

the new @mui/x-date-pickers package that we are maintaining and that should support RTL correctly.

I said it should work

[parthlashkari]

Please look here it isn't working in mui-x-datepickers also https://codesandbox.io/s/frosty-tamas-llfchy?file=/demo.tsx

[parthlashkari]

I have given inputFormat as dd/MMM/yyyy but i am getting dd/yyyy/MMM as output after giving direction:rtl

[flaviendelangle]

Two issues here

1. You are not using the last version of the lib, we are at 6.X not 5.X
2. You must pass the RTL to the theme, please follow this guide

Here is a working example: https://codesandbox.io/s/peaceful-mayer-6rqmwk?file=/demo.tsx

[parthlashkari]

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

[parthlashkari]

Because in arabic language , they read from right to left

[flaviendelangle]

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

[alexfauquette]

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

https://github.com/date-fns-jalali/date-fns-jalali/blob/master/src/locale/fa-IR/_lib/formatLong/index.ts

@flaviendelangle Is their a specific reason to keep this issue in material-ui repo?

[flaviendelangle]

Since we are now talking about the new package, no => transferred 👍

[alexfauquette]

@parthlashkari Did add space solved your issue?

[tripleplayj]

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?

[oscar-b]

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

[alexfauquette]

I can confirm that it's broken on luxon too

https://codesandbox.io/p/sandbox/mystifying-pine-9fkmkd?workspaceId=836800c1-9711-491c-a89b-3ac24cbd8cd8

By the way, demos in https://mui.com/x/react-date-pickers/calendar-systems/ seems to also have a broken keyboard navigation.

[oscar-b]

@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).
moment/luxon#1120 (comment)

https://codesandbox.io/p/sandbox/little-surf-szg5ky?file=/src/Demo.tsx:17,21

[oscar-b]

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

https://codesandbox.io/p/sandbox/modern-currying-k5wnk7