While developing applications, it's very common to use dates. It can be for a content website, or for a forum to show the date and time of question-anwer posting or a social networking website like Facebook, Twitter etc where date and time is stored along with your status/pictures to show it on your feed.
In short there are many use cases for storing and displaying date on the user interface. This article will not cover the storing part but we will share how to display the date in native language using JavaScript especially in Hindi.
These days there are many applications which are in native language like Hindi, Japanese, Chinese etc to cater the local audience. So if you are using JavaScript in your application and want to display date in your native language, this article will help you.
JavaScript toLocaleDateString() function:
For accomplishing this we will be using the toLocaleDateString() function of JavaScript. It's very simple to use this function but by default this function will show date in the format dd/m/yyyy which means for 28th August 2019 it will display 28/8/2019 but we can provide an optional parameter options to it which will be a map providing information about how to display various components of a date.
We will cover details about the toLocaleDateString() function in a separate post, for this article, let's focus displaying date in native language.
Step 1: Define options map
Define your options map providing what components of the date you want to display and how. For this example, we will show weekday, numeric date value, month name and year.
var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
Step 2: Show Date in Native Language(Hindi)
Now the real game begins. We will be creating a new date using the Date class of JavaScript and then we will display that date in various different native languages along with Hindi. You can create the Date object in different ways, using UNIX timestamp, or basic date format etc.
var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
var today = new Date();
console.log(today.toLocaleDateString("hi-IN", options));
Output:
As you can see in the code above we have specified the locale value as hi-IN which is for hindi. Similarly we can provide different language formats. Let's take a few more examples.
Show Date in Korean Language
For date in korean we should use the locale value ko-KR
var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
var today = new Date();
console.log(today.toLocaleDateString("ko-KR", options));
Output:
Show Date in German Language
For date in german we should use the locale value de-DE
var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
var today = new Date();
console.log(today.toLocaleDateString("de-DE", options));
Output:
Mittwoch, 28. August 2019
Show Date in Japanese Language
For date in japanese we should use the locale value ja-JP
var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
var today = new Date();
console.log(today.toLocaleDateString("ja-JP", options));
Output:
Conclusion
Similarly, you can use this to display date in any native language by changing the locale value in the toLocaleDateString() function of JavaScript. For thai it will be th-TH, for british english it will be en-GB, for arabic use the locale ar-EG. So now you can display dynamic date value in your native language on your web application.
You may also like:
