Date Formatting in JS [SOLVED]

Using DateTimeFormat for Date Formatting in JS

The DateTimeFormat object is a constructor for objects that enable language-sensitive date and time formatting. The DateTimeFormat object is useful for formatting dates and times in a number of locales, and for parsing dates and times entered by users. In this article, we will discuss all about the DateTimeFormat object and some of its behavior.

Th Intl.DateTimeFormatclass is a lot like the Intl.NumberFormat class. TheIntl.DateTimeFormat()constructor takes the same two arguments thatIntl.NumberFormat()does: a locale or array of locales and an object of formatting options. And the way you use an Intl.DateTimeFormatinstance is by calling itsformat()method to convert a Date object to a string.

The Intl.DateTimeFormatclass provides fine-grained control over what is output based on the properties in the options object that is passed as the second argument to the constructor. Note, however, that Intl.DateTimeFormatcannot always display exactly what you ask for. If you specify options to format hours and seconds but omit minutes, you’ll find that the formatter displays the minutes anyway. The idea is that you use the options object to specify what date and time fields you’d like to present to the user and how you’d like those formatted (by name or by number, for example), then the formatter will look for a locale-appropriate format that most closely matches what you have asked for.

Here are some examples:

let d = new Date("2020-01-02T13:14:15Z");  // January 2nd, 2020, 13:14:15 UTC

// With no options, we get a basic numeric date format
Intl.DateTimeFormat("en-US").format(d) // => "1/2/2020"
Intl.DateTimeFormat("fr-FR").format(d) // => "02/01/2020"

// Spelled out weekday and month
let opts = { weekday: "long", month: "long", year: "numeric", day: "numeric" };
Intl.DateTimeFormat("en-US", opts).format(d) // => "Thursday, January 2, 2020"
Intl.DateTimeFormat("es-ES", opts).format(d) // => "jueves, 2 de enero de 2020"

// The time in New York, for a French-speaking Canadian
opts = { hour: "numeric", minute: "2-digit", timeZone: "America/New_York" };
Intl.DateTimeFormat("fr-CA", opts).format(d) // => "8 h 14"

Use the DateTimeFormat object for locale time

To present language-sensitive date and time formatting in JavaScript, the DateTimeFormat object is useful. The DateTimeFormat object holds a single static method and a couple of instance methods that are helpful in the development of locale-based date and time. We will make use of a few of these methods to achieve locale time at different locations.

For example, if we need to provide the date and time for people in the appropriate format for people in the US, UK, and Korea, we can generate the date and time using the Date() constructor. Then, initialize the DateTimeFormat constructor and make use of the instance format method to format the US, UK and Korean date and time to be displayed. The code below illustrates this.

const date = new Date();

console.log(new Intl.DateTimeFormat("en-US").format(date));
console.log(new Intl.DateTimeFormat("en-GB").format(date));
console.log(new Intl.DateTimeFormat("ko-KR").format(date));

Output

11/9/2022
09/11/2022
2022. 11. 9.

The en-US, en-GB, and ko-KR are the locale formatting for the US, the UK, and Korea respectively. The US uses the month, day, and year format. The UK uses the day, month, and year, and Korea makes use of the year, month, and day order. More important to the code above is the format method which serves as a getter function that formats the date according to the locale option provided within the DateTimeFormat object.

In addition to formatting and displaying the date and time values based on the locale option provided, we can make use of the DateTimeFormat object alongside with the format method to present the data and time value in different styles and lengths. If we need the date or time in a full or short style, we can specify it within the DateTimeFormat object via the dateStyle and timeStyle options (”full”, “short”, “numeric”)

const date = new Date();

console.log(
    new Intl.DateTimeFormat("en-GB", {
        dateStyle: "full",
        timeStyle: "short",
    }).format(date)
);

Output

Wednesday, 9 November 2022 at 14:04

In the above, we specified that the date be displayed in the full style and the time be displayed in the short style.

Use formatRange method

TheformatRangemethod of theIntl.DateTimeFormatclass formats a range between two dates as concisely as possible:

const christmas = new Date(1999, 11, 24)
const newYearsDay = new Date(2000, 0, 1)
const formatter = new Intl.DateTimeFormat('en', { dateStyle: 'long' })
formatter.formatRange(christmas, newYearsEve) // 'December 24 — 31, 1999'
formatter.formatRange(newYearsEve, newYearsDay) // 'December 31, 1999 — January 1, 2000'

Summary

Within your application, date and time are important information bits that might be needed across different locations, so it makes a lot of sense to render or format the date and time values based on the locale value from which the user is accessing the application. To achieve that, we can make use of the DateTimeFormat method alongside their other methods and options.

References

Intl.DateTimeFormat - JavaScript | MDN (mozilla.org)
Intl.DateTimeFormat.prototype.format() (mozilla.org)