Handling dates in JavaScript can be challenging, especially when it comes to formatting them properly. Fortunately, the Intl API provides an easy way to format dates in multiple languages and regions. In this article, we are going to explore how to use the Intl API to format dates in JavaScript.
What is the Intl API?
The Intl API is a part of the ECMAScript standard that provides functionality for internationalizing JavaScript applications. Among the most notable features of the Intl API is the ability to format dates, numbers and currencies according to the local standards of each region.
Basic date formatting with Intl.DateTimeFormat
The Intl.DateTimeFormat object allows us to format dates according to local conventions. To begin, we need to create an instance of this object, specifying the language and formatting options we want to use.
const date = new Date(); const options = { year: 'numeric', month: 'long', day: 'numeric' }; const format = new Intl.DateTimeFormat('es-ES', options); const formattedDate = format.format(date); console.log(formatteddate); // October 20, 2022
In this example, we have created an instance of DateTimeFormat to format the current date in 'day of week, day of month of year' format. The result obtained is "October 20, 2022" in Spanish.
Custom formatting options
The Intl API allows you to further customize the date format using different options. Some of the most common options include:
- year: "numeric", "2-digit".
- month: "numeric", "2-digit", "long", "short", "narrow".
- day: "numeric", "2-digit".
- hour: "numeric", "2-digit".
- minute: "numeric", "2-digit".
- second: "numeric", "2-digit".
- weekday: "long", "short", "narrow".
For example, if we wanted to display only the year and month in numeric format, we could do the following:
const options = { year: 'numeric', month: 'numeric' }; const format = new Intl.DateTimeFormat('es-ES', options); const formattedDate = format.format(date); console.log(formatteddate); // 10/2022
Advanced formatting with custom options
In addition to the basic formatting options, the Intl API also supports custom options to format dates more precisely. For example, we can specify the formatting style, the calendar to use, the time zone, and more.
const options = { year: 'numeric', month: 'long', day: 'numeric', hour: 'numeric', minute: 'numeric', timeZone: 'America/New_York' }; const format = new Intl.DateTimeFormat('es-ES', options); const formattedDate = format.format(date); console.log(formatteddate); // October 20, 2022 at 12:34 PM
In this example, we have used the 'timeZone' option. to display the time in the New York time zone. The result obtained is "October 20, 2022 at 12:34 PM" in Spanish.
Frequent questions
- What is the Intl API?: The Intl API is a part of the ECMAScript standard that provides functionality for internationalizing JavaScript applications. Allows you to format dates, numbers and currencies according to local standards.
- How do you use the Intl API to format dates in JavaScript?: To format dates with the Intl API, you need to create an instance of Intl.DateTimeFormat and specify the desired language and formatting options.
- What types of formatting options can be used with the Intl API?: Available format options include year, month, day, hour, minute, second, and weekday. Each of these can have values such as numeric, 2-digit, long, short and narrow, among others.
- Can I further customize the date format with the Intl API?: Yes, the Intl API also supports custom options to format dates more precisely, such as specifying the format style, calendar to use, and time zone.
I hope this article helped you understand how to format dates with the Intl API in JavaScript. Don't hesitate to use this powerful tool to improve the internationalization experience of your applications!
English 
Spanish