Grace Samson 
Hello friends today we gonna learn about How to Format Dates for International Sites Effectively. So read this article, How to Format Dates for International Sites Effectively step by step so you may understand it in a better way. If you have query related to same article you may contact us. So Lets begin:
Guide: How to Format Dates for International Sites Effectively
Date formats vary by region and language so it is always helpful if we can find a way to display the dates to the users specific to their language and region.
In December, ECMA released the specifications of the Internationalization API for JavaScript. The Internationalization API helps us to display certain data according to the language and cultural specification. It can be used identify currencies, time zones and more.
In this post, we’ll investigate date format using this API.
back to menu ↑Know the user’s locale
To display the date according to the user’s preferred locale, we first need to know what that preferred locale is. Currently, the foolproof way to know that is to ask the user; allows users to select their preferred language and region settings from the web page.
But if that’s not an option, you can interpret the Accept-Language request header or read the navigator.language (for Chrome and Firefox) or navigator.browserLanguage (for IE) values.
Note that not all of these options return the preferred language of the browser interface.
var language_tag = window.navigator.browserLanguage || window.navigator.language || “And”; // returns language tags such as ‘en-GB’
back to menu ↑Check for Internationalization API
To know whether the browser supports Internationalization API or not, we can check for the presence of the global object Intl.
if (window.hasOwnPropertyâ € ‹(” Intl “) && typeof Intl ===” object “) {// Internationalization API is present, let’s use that}
back to menu ↑The Intl object
Intl is a global object for using the Internationalization API. It has three properties which are constructors for three objects namely Collator, NumberFormat and DateTimeFormat.
The object we will use is DateTimeFormat, which will allow us to format the date and time according to different languages.
back to menu ↑The DateTimeFormat object
The DateTimeFormat constructor has two optional arguments;
- locales – a string or an array of strings representing, for example, the language tags; “The” for German language, “en-GB” for English used in the UK. If no language tag is listed, the default locale is that of runtime.
- options – an object whose properties are used to modify the formatter. It has the following properties:
| Property | Description | Possible values |
| day | Day of the month | “2 digits”, “numeric” |
| era | Era in which the date falls, Ex: BC | “Narrow”, “short”, “long” |
| formatMatcher | The algorithm used for size matching | “Basic”, “best fit”[Default] |
| hour | Represents hours over time | “2 digits”, “numeric” |
| hour 12 | Specifies 12-hour format (true) or 24-hour format (false) | true false |
| localeMatcher | The algorithm used for locale matching | “Lookup”, “best fitting”[Default] |
| minute | Minutes in time | “2 digits”, “numeric” |
| month | Month in a year | “2 digits”, “numeric”, “narrow”, “short”, “long” |
| second | Seconds in time | “2 digits”, “numeric” |
| time zone | Time zone to be applied | “UTC”, default is the runtime time zone |
| timeZoneName | Time zone of the date | “short long” |
| weekday | Day of the week | “Narrow”, “short”, “long” |
| year | Year of the date | “2 digits”, “numeric” |
Example:
var formatter = new Intl.DateTimeFormat (‘en-GB’); / * returns a formatter that can format a date in British English date format * /
var options = {weekday: ‘short’}; var formatter = new Intl.DateTimeFormat (‘en-GB’, options); / * returns a formatter that can format a date in British English date format * along with the weekday in short format like ‘do’ for Thursday * /
back to menu ↑The format function
The instance of the DateTimeFormat object has an accessor (getter) property called format that returns a function that formats a date based on the locale and options found in the DateTimeFormat instance.
The function takes a Date object or undefined as an optional argument and returns a string in the requested date format.
Note: If the argument is not defined or not specified, it will return the value of Date.now () in the requested date format.
Here’s the syntax:
new Intl.DateTimeFormat (). format () // returns the current date in the runtime date format
And now let’s code a simple date format.
See Preethi’s Pen ZGbLdL (@rpsthecoder) on CodePen.
Let’s change the language and see the output.
See the Pen gpambJ by Preethi (@rpsthecoder) on CodePen.
Now is the time to look at options.
See Preethi’s Pen QbjpvK (@rpsthecoder) on CodePen.
back to menu ↑The toLocaleDateString method
Instead of using a formatter like in the above examples, you can also use Date.prototype.toLocaleString in the same way with the locales and options arguments, they are similar, but it is recommended to use the DateTimeFormat object with the deal with too many dates in your application.
var mydate = new date (‘2015/04/22’); var options = {weekday: “short”, year: “numeric”, month: “long”, day: “numeric”};
console.log (mydate.toLocaleDateString (‘en-GB’, options)); // returns “Wed, January 22”
back to menu ↑Test if the regional settings are supported
To check the supported locale we can use the supportedLocalesOf method of the DateTimeFormat object. It will return an array of all supporting locale or an empty array if none of the locale is supported.
Before testing, let’s add a dummy locale “blah” to the list of locale to check.
console.log (Intl.DateTimeFormat.supportedLocalesOf ([“zh”,”blah”, “fa-pes”])); // returns Array [ “zh”, “fa-pes” ]
back to menu ↑Browser support
Major browsers will support the Internationalization API at the end of January.
back to menu ↑References
- ECMA International: ECMAScript Internationalization API Specification
- IANA: Language Subtag Register
- Norbert’s Corner: the ECMAScript Internationalization API
How to Format Dates for International Sites Effectively: benefits
- The How to Format Dates for International Sites Effectively tutorial is free .
- This guide already helps so many users follow up with interest in a timely manner.
- The price of the How to Format Dates for International Sites Effectively guide is free.
Faq
Tutorial summary of How to Format Dates for International Sites Effectively
How this tutorial helping you?
What is actual time in which this method complete?
What are the supported Device?
back to menu ↑
Final note
I hope you like the guide How to Format Dates for International Sites Effectively. In case if you have any query regards this article you may ask us. Also, please share your love by sharing this article with your friends.
For our visitors: If you have any queries regards the How to Format Dates for International Sites Effectively, then please ask us through the comment section below or directly contact us.
Education: This guide or tutorial is just for educational purposes.
Misinformation: If you want to correct any misinformation about the guide “How to Format Dates for International Sites Effectively”, then kindly contact us.
Want to add an alternate method: If anyone wants to add more methods to the guide How to Format Dates for International Sites Effectively, then kindly contact us.
Our Contact: Kindly use our contact page regards any help. You may also use our social and accounts by following us on Whatsapp, Facebook, and Twitter for your questions. We always love to help you. We answer your questions within 24-48 hours (Weekend off).
Channel: If you want the latest software updates and discussion about any software in your pocket, then here is our Telegram channel.
