How to Format Dates for International Sites Effectively

Can I use

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:
PropertyDescriptionPossible values
dayDay of the month“2 digits”, “numeric”
eraEra in which the date falls, Ex: BC“Narrow”, “short”, “long”
formatMatcherThe algorithm used for size matching“Basic”, “best fit”[Default]
hourRepresents hours over time“2 digits”, “numeric”
hour 12Specifies 12-hour format (true) or 24-hour format (false)true false
localeMatcherThe algorithm used for locale matching“Lookup”, “best fitting”[Default]
minuteMinutes in time“2 digits”, “numeric”
monthMonth in a year“2 digits”, “numeric”, “narrow”, “short”, “long”
secondSeconds in time“2 digits”, “numeric”
time zoneTime zone to be applied“UTC”, default is the runtime time zone
timeZoneNameTime zone of the date“short long”
weekdayDay of the week“Narrow”, “short”, “long”
yearYear 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
back to menu ↑

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.

back to menu ↑

Faq

Tutorial summary of How to Format Dates for International Sites Effectively

In this guide, we told you about the How to Format Dates for International Sites Effectively; please read all steps so that you understand How to Format Dates for International Sites Effectively in case if you need any assistance from us, then contact us.

How this tutorial helping you?

So in this guide, we discuss the How to Format Dates for International Sites Effectively, which undoubtedly helps you.

What is actual time in which this method complete?

The time to complete the How to Format Dates for International Sites Effectively tutorial is 10+ minutes.

What are the supported Device?

PC Laptop or Desktop


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.

Compsmag
Logo
Shopping cart