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.DateTimeFormat
class is a lot like the Intl.NumberFormat
class. The Intl.DateTimeFormat()
constructor takes the same two arguments that Intl.NumberFormat()
does: a locale or array of locales and an object of formatting options. And the way you use an Intl.DateTimeFormat
instance is by calling its format()
method to convert a Date object to a string.
The Intl.DateTimeFormat
class 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.DateTimeFormat
cannot 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
The formatRange
method of the Intl.DateTimeFormat
class 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)