Algo que parece sencillo como el tratamiento de las fechas se puede volver algo complejo si no tenemos en cuenta cómo tratarlas a la hora de presentarlas al usuario. Es por ello que aquí vamos a ver cómo podemos dar formato de fechas en Javascript.
Para ello vamos a trabajar con el objeto Intl la cual nos permite adecuar el formato de las fechas a la localización en la que presentamos el contenido.
Lo primero será crear una fecha. Para ello utilizamos el objeto Date, al cual pasamos una fecha en concreto.
// Definimos una fecha
const fecha = new Date('February 15, 2020 20:52:30 GMT+00:00');
Ahora vamos a crear nuestro objeto Int, en concreto el método .DateTimeFormat() el cual nos sirve para poder dar formato de fechas en Javascript.
new Intl.DateTimeFormat(locale,options);
Este método recibe dos parámetros, el primero es el local del formato que queremos seguir, el cual atiende a una etiqueta que siga la especificación BCP 47. Este es un código con el acrónimo del idioma, seguido de un guión y del acrónimo del país sobre el que queremos hacer la localización. Por ejemplo es-ES para castellano de España, en-US para el inglés de Estados Unidos o ar-EG para el árabe de Egipto.
El segundo parámetro son las opciones para el formato de la fecha. En ellas podemos definir, mediante una estructura JSON algunos valores como el estilo del formato, calendario a utilizar o sistema de numeración,… Así podemos dar forma algunos de los siguientes parámetros:
- dateStyle, para el estilo de la fecha y que puede tener los valores ‘full’, ‘long’, ‘medium’ o ‘short’.
- timeStyle, para el estilo de la hora y que puede tener los valores ‘full’, ‘long’, ‘medium’ o ‘short’.
- calendar, para indicar el tipo de calendario y que puede tener los valores ‘buddhist’, ‘chinese’, ‘coptic’, ‘ethiopia’, ‘ethiopic’, ‘gregory’, ‘hebrew’, ‘indian’, ‘islamic’, ‘iso8601’, ‘japanese’, ‘persian’, ‘roc’.
- dayPeriod, para expresar los periodos del día, con los valores ‘narrow’, ‘short’ o ‘long’.
- …
El formato JSON quedará de la siguiente manera:
{
dateStyle:'short',
timeStyle:'long',
calendar:'iso8601'
}
Por lo que la invocación al método .DateTimeFormat() se haría de la siguiente forma:
new Intl.DateTimeFormat('en-US',{dateStyle:'short'});
Ahora lo que tenemos que hacer es invocar al método .format() al cual le pasaremos la fecha para que pueda ejecutar el formato.
// 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));
En este código podemos ver el resultado para fechas cortas:
2/15/20<s/amp>
Fechas largas:
Saturday, February 15, 2020
O fechas en el calendario islámico.
sábado, 22 de jumada II de 1441 AH
De esta manera podrás tratar tus programas que tengan que dar formato de fechas en Javascript.
