Something that seems simple as the treatment of dates can become complex if we don't take into account how to treat them when presenting them to the user. That is why here we are going to see how we can format dates in JavaScript.
To do this we are going to work with the Intl object which allows us to adapt the format of the dates to the location in which we present the content.
The first thing to do is to create a date. To do this we use the Date object, to which we pass a specific date.
// Date setting const date = new Date('February 15, 2020 20:52:30 GMT+00:00');
Now we are going to create our Int object, specifically the .DateTimeFormat() method which is used to format dates in JavaScript.
new Intl.DateTimeFormat(locale,options);
This method receives two parameters, the first one is the locale of the format we want to follow, which is a tag that follows the BCP 47 specification. This is a code with the acronym of the language, followed by a hyphen and the acronym of the country on which we want to do the localisation. For example es-ES for Spanish Spanish, en-US for US English or ar-EG for Egyptian Arabic.
The second parameter is the options for the date format. In them we can define, by means of a JSON structure, some values such as the format style, calendar to be used or numbering system,... Thus we can shape some of the following parameters:
- dateStyle, for the style of the date and that can have the values 'full', 'long', 'medium' or 'short'.
- timeStyle, for the style of the time, which can have the values 'full', 'long', 'medium' or 'short'.
- calendar, to indicate the type of calendar and which can have the values 'buddhist', 'chinese', 'coptic', 'ethiopia', 'ethiopic', 'gregory', 'hebrew', 'indian', 'islamic', 'iso8601', 'japanese', 'persian', 'roc'.
- dayPeriod, to express periods of the day, with the values 'narrow', 'short' or 'long'
- ...
So the call to the .DateTimeFormat() method would be as follows:
new Intl.DateTimeFormat('en-US',{dateStyle:'short'});
Now what we have to do is to invoke the .format() method to which we will pass the date so that it can execute the formatting.
// En inglés americano se pone primero el mes y luego el día.
console.log(new Intl.DateTimeFormat('en-US',{dateStyle:'short'}).format(fecha));
console.log(new Intl.DateTimeFormat('en-US',{dateStyle:'full'}).format(fecha));
// Es formato español se pone primero el día y luego el mes.
console.log(new Intl.DateTimeFormat('es-ES',{dateStyle:'short'}).format(fecha));
console.log(new Intl.DateTimeFormat('es-ES',{dateStyle:'full',calendar:'islamic'}).format(fecha));
In this code we can see the result for short dates:
2/15/20<s/amp>
Long dates:
Friday, April 30, 2021
Or dates in the Islamic calendar.
Ramadan 18, 1442
This way you can handle your programs that have to format dates in JavaScript.