Fechas en formato local con Javascript

En los artículos que tenemos sobre fechas en Javascript nos faltaba uno acerca de cómo poder crear fechas en formato local con Javascript. Es decir poder realizar una internacionalización (i18n) de la fecha antes de imprimirla. Muchos os estaréis diciendo, «esto ya lo hemos visto utilizando el objeto Java.Intl«. Y es verdad. Pero en este caso vamos a ver las capacidades que tiene directamente el objeto Date para poder realizar esta internacionalización (i18n).

Lo primero de todo será crear una fecha mediante el objeto Date. En este caso vamos a utilizar el método .UTC() para crear una fecha concreta de la siguiente manera:

const fecha = new Date(Date.UTC(2020, 02, 15, 12, 0, 0));

Lo siguiente será el ver cómo podemos dar el formato local. Para ello nos vamos a apoyar en el método .toLocaleDateString() el cual recibe por un lado una cadena que siga la especificación BCP 47. Esto es más o menos dos pares de caracteres separados por un guión en los que se puede identificar el idioma y el país. Así tenemos es-ES castellano para España, en-UK que sería inglés en el Reino Unido, en-US que sería inglés en Estados Unidos o ar-EG que sería árabe en Egipto.

El segundo parámetro es un elemento JSON en el que podemos indicar las opciones de la localización. Entre estas opciones encontramos las siguientes:

weekday, como queremos que se represente el día de la semana si con un texto estrecho (narrow), corto (short) o largo (long).
year, por si queremos que sea de cuatro dígitos (numeric) o de dos dígitos (2-digit).
month, podemos visualizarlo con un dígito (numeric), con dos digitos (2-digit), estrecho (narrow), corto (short) o largo (long).
day, que podrá ser de un dígito (numeric) o de dos dígitos (2-digit).

Así podríamos tener la siguiente configuración de opciones para visualizar la fecha.

const options = {
 weekday: 'long',
 year: 'numeric',
 month: 'long',
 day: 'numeric' 
};

La verdad es que en este punto hay un pequeño «truco» y es que el método .toLocaleDateString() realmente está ejecutando el constructor del Intl.DateTimeFormat.

Ahora lo que haremos será invocar al método .toLocaleDateString() con la cadena del locale más las opciones. Así tenemos las siguientes opciones que se mostrarían por consola.

// Castellano
// domingo, 15 de marzo de 2020
console.log(fecha.toLocaleDateString('es-ES', options));

// Alemán
// Sonntag, 15. März 2020
console.log(fecha.toLocaleDateString('de-DE', options));

// Árabe
// الأحد، ١٥ مارس ٢٠٢٠
console.log(fecha.toLocaleDateString('ar-EG', options));

// Por defecto del sistema
// domingo, 15 de marzo de 2020
console.log(fecha.toLocaleDateString(undefined, options));

De esta forma tan sencilla hemos conseguido poder mostrar por consola fechas en formato local con Javascript.

Twittear

0 Compartir