How to format date into Arabic with English numerals for date and year in JavaScript?

Question

I want the date to be formatted in the following format:

date: 2016-12-04 into الأحد، 4 ديسمبر، 2016

But I'm getting the following. The numbers are converted to Arabic numerals. I want the date and year in English numerals:

الأحد، ٤ ديسمبر، ٢٠١٦

I have used the following code to format the date to Arabic.

var date = new Date('2016-12-04');
options = {
           weekday: 'long',
           year: 'numeric',
           month: 'short',
           day: 'numeric',
          };
var dateString = date.toLocaleDateString('ar-SA', options);
alert(dateString);

Fossil

Hope my answer below answers your question? – Culprit

Answer 1

A better (safer) way to get the Hijri (Islamic) date in English Numerals (Western-Arabic Numbers) in javascript is NOT to use a specific country locale like "ar-SA" or "ar-TN" or "ar-EG"; but use the Intl.DateTimeFormat() constructor with the following Locale options:

1. The numbering system (nu) set to latn (i.e. Western-Arabic Numbers), and

2. Calendar type (ca) set to islamic, and

3. The language locale to ar

The Locale options can be passed as an array for multiple options: ["ar-u-ca-islamic","ar-u-nu-latn"]

or as one string : "ar-u-ca-islamic-nu-latn"

Here is an example code that will print today's Hijri (Islamic) date with Western-Arabic Numbers (English Numerals):

I have also included a table to give the list of all Arabic "ar" locales and the default outputs to see the difference between them with regards to the name of the months and the default number system.

let options = {day: 'numeric', month: 'long',weekday:'long',year:'numeric'};

// 1st method
let locales = ["ar-u-ca-islamic","ar-u-nu-latn"];
console.log(new Intl.DateTimeFormat(locales, options).format(Date.now()));

// 2nd method
locales = "ar-u-ca-islamic-nu-latn";
console.log(new Intl.DateTimeFormat(locales, options).format(Date.now()));

Culprit

Answer 2

Found a solution Date conversion and manipulation in javascript with Arabic months

My modified code to get my desired output is as follows.

var date = new Date('2016-12-04');
var months = ["يناير", "فبراير", "مارس", "إبريل", "مايو", "يونيو",
  "يوليو", "أغسطس", "سبتمبر", "أكتوبر", "نوفمبر", "ديسمبر"
];
var days = ["اﻷحد", "اﻷثنين", "الثلاثاء", "اﻷربعاء", "الخميس", "الجمعة", "السبت"];
var delDateString = days[date.getDay()] + ', ' + date.getDate() + ' ' + months[date.getMonth()] + ', ' + date.getFullYear();

console.log(delDateString); // Outputs اﻷحد, 4 ديسمبر, 2016

Fossil

Note that new Date('2016-12-04') will parse the string as UTC, but your get methods are using local. Users in a timezone west of Greenwich will see a date for the previous day. – Mondragon

Answer 3

You can use this Locales to specify numbering system.

let date = newDate.toLocaleDateString('ar-EG-u-nu-latn',{weekday: 'long', year: 'numeric', month: 'short', day: 'numeric'});

also check this MDN link to know more about it

Sphygmic

Thank you so much ( Jazak Allah khairan ). – Kumar

Answer 4

To get the current hijri date in javascript, we can use Intl.DateTimeFormat

To get the arabic display :

new Intl.DateTimeFormat('ar-TN-u-ca-islamic', {day: 'numeric', month: 'long',weekday: 'long',year : 'numeric'}).format(Date.now());

the expected output :

السبت، 4 صفر 1443 هـ

https://medium.com/@Saf_Bes/get-today-hijri-date-in-javascript-90855d3cd45b

Tenotomy

This uses the Arabic locale for Tunisia to get a western-Arabic number (English Numerals) which is dangerous because the locale spec may change. – Culprit

See alternative solution above for Islamic date in English Numerals. – Culprit

Answer 5

Try 'ar-MA' (for Morocco) instead of 'ar-SA'.

Delfeena

Should be a comment – Autacoid

Why should it be a comment? It's a valid answer: ibm.com/support/knowledgecenter/SSS28S_3.0.0/… – Delfeena

I tried the ar_MA locale, it showing the Arabic numeral in Google Chrome V48. But the same worked in Firefox. jsfiddle.net/daj2jm3p/3 – Fossil