Javascript dates do not display properly in Arabic locales

Question

new Date().toLocaleDateString(
          "en-US",
          {
            day: '2-digit',
            month: '2-digit',
            year: 'numeric',
          })

console.log(
  new Date().toLocaleDateString(
    "en-US",
    {
      day: '2-digit',
      month: '2-digit',
      year: 'numeric',
    })
);

gives me "08/19/2021".

Whereas

new Date().toLocaleDateString(
          "ar-XB",
          {
            day: '2-digit',
            month: '2-digit',
            year: 'numeric',
          })

console.log(
  new Date().toLocaleDateString(
    "ar-XB",
    {
      day: '2-digit',
      month: '2-digit',
      year: 'numeric',
    })
);

is giving me "19‏/08‏/2021"

new Intl.DateTimeFormat("ar-XB", {
            day: '2-digit',
            month: '2-digit',
            year: 'numeric',
          }).format(new Date());

console.log(
  new Intl.DateTimeFormat("ar-XB", {
    day: '2-digit',
    month: '2-digit',
    year: 'numeric',
  }).format(new Date())
);

also gives me "19‏/08‏/2021"

How can I get the correct date format?

In what context are you using this? The last two return arabic which is right to left — pilchard, Aug 19 '21 at 16:59
added snippets for each. It looks like it's just console output anomalies. Node does fine (in VSCode terminal) and Safari logs '08/19/2021' — pilchard, Aug 19 '21 at 17:04
Thank you @pilchard. I am using this in a React app, and it shows up as "19‏/08‏/2021" in the UI. Running the app in Safari gives the correct format. Chrome and Brave have this issue. — VigilV CS, Aug 19 '21 at 17:19
There's an old bug addressing this: [Issue 1026229](https://bugs.chromium.org/p/chromium/issues/detail?id=1026229&q=format%20date%20component%3ABlink&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Component%20Status%20Owner%20Summary%20OS%20Modified) and some related questions: [In web application, format date to locale on Chrome not working](https://stackoverflow.com/questions/58932534/in-web-application-format-date-to-locale-on-chrome-not-working), [How does toLocaleDateString() work in Chrome?](https://stackoverflow.com/questions/14835858/how-does-tolocaledatestring-work-in-chrome) — pilchard, Aug 19 '21 at 20:44

score 1 · Accepted Answer · answered Aug 20 '21 at 00:13

You can try using formatToParts to get the parts and format them manually. They still appear as English characters in Chrome, but at least the format is what you expect.

let {year, month, day} = new Intl.DateTimeFormat("ar", {
            day: '2-digit',
            month: '2-digit',
            year: 'numeric',
          }).formatToParts(new Date()).reduce((acc, part) => {
            acc[part.type] = part.value;
            return acc;
          }, {});

console.log(`${year}/${month}/${day}`);

PS Using ${year.toLocaleString('ar')} didn't help in Chrome, the characters are still English, not Arabic.

Javascript dates do not display properly in Arabic locales

1 Answers1