Internacionalización en ES6 2: La clase DateTimeFormat

Introducción

En nuestro artículo anterior, aprendimos en qué consiste el namespace Intl y las ventajas que ofrece el uso de las clases que contiene, centrándonos en la clase Collator. En este artículo, aprenderemos a trabajar con fechas internacionalizadas mediante el uso de la clase DateTimeFormat.

DateTimeFormat

Como indicamos anteriormente, gracias al objeto Intl.DateTimeFormat podremos construir objetos que nos permitirán trabajar con fechas internacionalizadas. Su sintaxis básica es la siguiente:

var local = 'es-ES',
    options = {},
    dateTime = new Intl.DateTimeFormat(local, options);

// Para el 29 de junio de 2016, la salida será: 29/6/2016
console.log(dateTime.format(new Date());

• local: parámetro obligatorio que será una cadena o array de cadenas con el idioma en formato BCP 47.
• options: parámetro opcional en el que se especifica una serie de opciones para aplicar el formato de fecha que veremos en el apartado siguiente.

Tras observar el ejemplo anterior, os preguntaréis, en qué se diferencia de los métodos toLocaleDateString y toLocaleString del objeto Date, pues prácticamente ninguna, lo único que con el uso de Intl, ahorraremos pasar idioma y opciones con cada llamada, ya que lo podemos inicializar durante el arranque de la aplicación o cuando sea necesario cambiar la configuración regional. Sin embargo, cada llamada a toLocaleDateString requiere el paso de los dos parámetros, además de relanzarse el parseo de la configuración indicada.

Pensad por ejemplo, que tenéis en una aplicación 20 fechas en 20 sitios distintos y que además al formatear se le aplica alguna opción especial. Habría que repetir 20, la llamada exacta, por ejemplo:

var dateOptions = {
      weekday: "long",
      year: "numeric",
      month: "long"
    },
    language = 'es-ES';

...

// Con cada instancia de una fecha, al querer "imprimirla" tendríamos:
myDate.toLocaleDateString(language, dateOptions);

Con el ejemplo anterior, siempre tendríamos que tener presentes las opciones así como el idioma, en cuanto uno de los dos se perdieran o se obviaran, una de las fechas no tendría el formato adecuado. Sin embargo, con DateTimeFormat, tendríamos centralizada la conversión de fechas:

var options = {
      weekday: "long",
      year: "numeric",
      month: "long"
    },
    language = 'es-ES',
    dateConverter = new Intl.DateTimeFormat(language, options);

...

// Ahora con cada instancia, tan sólo llamaríamos a:
dateConverter.format(myDate);

Ahora hemos pasado de requerir dos objetos, a sólo uno, quedando además mucho más legible el código. Y no sólo eso, sino que creando alguna función para centralizar la conversión, se podría cambiar la configurar de formato y todo seguiría funcionando correctamente con el nuevo formato.

El atributo options

El atributo options, es un objeto con el que indicamos a la case DateTimeFormat el formato de la cadena de salida. A continuación indicaremos algunas de las opciones más comunes, partiendo de la base siguiente:

// Al instanciar la fecha tenemos que su valor es:
// Thu Jul 07 2016 21:26:48 GMT+0200 (Hora de verano romance)
var date = new Date(),
    dateFormat;

weekday

Indica la representación que se utilizará para mostrar el nombre del día de la semana. Sus valores son: "narrow", "short" o "long".

dateFormat = new Intl.DateTimeFormat('es-ES', {weekday: 'narrow'});
dateFormat.format(date); // Salida: J

dateFormat = new Intl.DateTimeFormat('es-ES', {weekday: 'short'});
dateFormat.format(date); // Salida: jue.

dateFormat = new Intl.DateTimeFormat('es-ES', {weekday: 'long'});
dateFormat.format(date); // Salida: jueves

hour12

Indica si se utiliza el formato de 12 horas, en lugar del formato de 24 horas. Es un valor booleano, por lo que sus posibles valores son true y false.

dateFormat = new Intl.DateTimeFormat('es-ES', {hour12: true, hour: 'numeric'});
dateFormat.format(date); // Salida: 9 p. m.

dateFormat = new Intl.DateTimeFormat('es-ES', {hour12: false, hour: 'numeric'});
dateFormat.format(date); // Salida: 21

year

Indica el tipo de representación utilizado para el año, siendo sus posibles valores: "numeric" y "2-digit".

dateFormat = new Intl.DateTimeFormat('es-ES', {year: 'numeric'});
dateFormat.format(date); // Salida: 2016

dateFormat = new Intl.DateTimeFormat('es-ES', {year: '2-digit'});
dateFormat.format(date); // Salida: 16

month

Formato que se utilizará para representar el mes. Los valores a utilizar serían: "numeric", "2-digit", "narrow", "short" y "long".

dateFormat = new Intl.DateTimeFormat('es-ES', {month: 'numeric'});
dateFormat.format(date); // Salida: 7

dateFormat = new Intl.DateTimeFormat('es-ES', {month: '2-digit'});
dateFormat.format(date); // Salida: 07

dateFormat = new Intl.DateTimeFormat('es-ES', {month: 'narrow'});
dateFormat.format(date); // Salida: J

dateFormat = new Intl.DateTimeFormat('es-ES', {month: 'short'});
dateFormat.format(date); // Salida: jul.

dateFormat = new Intl.DateTimeFormat('es-ES', {month: 'long'});
dateFormat.format(date); // Salida: julio

day

Con este parámetro se indica como se mostrará el día del mes, siendo sus posibles valores: "numeric" y "2-digit".

dateFormat = new Intl.DateTimeFormat('es-ES', {day: 'numeric'});
dateFormat.format(date); // Salida: 7

dateFormat = new Intl.DateTimeFormat('es-ES', {day: '2-digit'});
dateFormat.format(date); // Salida: 07

hour

Con este parámetro se especifica que formato tendrá la hora. Los valores que puede tomar son: "numeric" y "2-digit".

// En este caso suponemos que la hora tiene el valor 9.
dateFormat = new Intl.DateTimeFormat('es-ES', {hour: 'numeric'});
dateFormat.format(date); // Salida: 9

dateFormat = new Intl.DateTimeFormat('es-ES', {hour: '2-digit'});
dateFormat.format(date); // Salida: 09

minute

Representación que se utilizará para mostrar los minutos. Sus valores son: "numeric" y "2-digit".

// Suponemos que los minutos son 7.
dateFormat = new Intl.DateTimeFormat('es-ES', {minute: 'numeric'});
dateFormat.format(date); // Salida: 7

dateFormat = new Intl.DateTimeFormat('es-ES', {minute: '2-digit'});
dateFormat.format(date); // Salida: 07

second

Para terminar, este parámetro especifica el formato de los segundos. Sus valores son: "numeric" y "2-digit".

// Suponemos que los segundos son 4.
dateFormat = new Intl.DateTimeFormat('es-ES', {second: 'numeric'});
dateFormat.format(date); // Salida: 4

dateFormat = new Intl.DateTimeFormat('es-ES', {second: '2-digit'});
dateFormat.format(date); // Salida: 04

Ejemplos

Como se ha observado en los ejemplos anteriores, si sólo se especifica un parámetros, será el único que devolverá format. Pero se puede realizar cualquier combinación, como se puede observar en los ejemplos siguientes:

// Se parte de la fecha:
// Thu Jul 07 2016 21:26:48 GMT+0200 (Hora de verano romance)
var date = new Date(),
    dateFormat, options;

    options = {
        weekday: 'long',
        month: 'short',
        day: '2-digit',
        year: '2-digit'
    };
    dateFormat = new Intl.DateTimeFormat('es-ES', options);
    dateFormat.format(date); // Salida: jueves, 07 de jul. de 16

    options = {
        weekday: 'short',
        month: 'long',
        day: '2-digit',
        year: 'numeric',
        hour: '2-digit',
        minute: 'numeric'
    };
    dateFormat = new Intl.DateTimeFormat('es-ES', options);
    dateFormat.format(date); // Salida: jue., 07 de julio de 2016 21:26

Compatibilidad

Enlaces

• Descripción de la clase en MDN
• Internacionalización en ES6 1: La clase Collator