Una de las cosas interesantes de la librería de internacionalización representada en el objeto Int
es el manejo de fechas relativas en Javascript. Dicho manejo nos permite representar una fecha atendiendo a elemento relativos, es decir, poder especificar cual fue el día de ayer, o antes de ayer, o dentro de tres meses,… y todo ello atendiendo a la localización que le indiquemos, por lo cual podremos especificar literalmente este contenido.
Para ello lo primero que vamos a hacer es crear un objeto Intl
. En concreto vamos a instanciar el objeto RelativeTimeFormat
.
const rtf1 = new Intl.RelativeTimeFormat(locale,options);
Este objeto recibe dos parámetros, la etiqueta de localización representada por un código BCP 47 en la que los dos primero caracteres representan el idioma, luego encontraremos un guión y luego dos caracteres que representan al país. Así encontraremos ‘es-ES’, ‘ca-ES’, ‘en-UK’, ‘en-US’, ‘ar-EG’,…
El segundo parámetro los las opciones en las que queremos representar el contenido de la fecha. Estas opciones se representan en formato JSON. Las tres propiedades que hay en las opciones son:
- style, cómo queremos que sea la longitud del texto, que puede ser ‘long’, ‘short’ o ‘narrow’.
- numeric, si queremos que los números se representen en formato numérico, daríamos el valor ‘always’ o en formato textual, que daríamos el valor ‘auto’.
- localeMatcher, que indica el algoritmo de matching a ejecutar y cuyos valores pueden ser ‘lookup’ o ‘best fit’.
Así la creación de nuestro objeto RelativeTimeFormat
quedará de la siguiente forma:
// Si eliminas la propiedad numeric lo muestra en números. const rtf1 = new Intl.RelativeTimeFormat('es-ES', { style: 'long', numeric:'auto' });
Lo siguiente será apoyarnos en el método .format() el cual recibe dos parámetros, el primero numérico positivo o negativo con la relatividad y el segundo el tamaño de la relatividad, si queremos que sea meses, días, años,…
De esta forma si queremos que nos indique el día de ayer escribiremos:
// Ayer console.log(rtf1.format(-1, 'day'));
Pero si queremos indicar que sea pasado mañana lo pondríamos de la siguiente forma:
// Pasado mañana console.log(rtf1.format(2, 'day'));
Podemos utilizar la medida de meses, así el mes pasado sería:
// El mes pasado console.log(rtf1.format(-1, 'month'));
O incluso podemos utilizar trimestres, así dentro de tres trimestres sera:
// Dentro de tres trimestres console.log(rtf1.format(3, 'quarter'));
Como vemos es muy sencillo utilizar el objeto RelativeTimeFormat
para poder representar Fechas relativas en Javascript de una forma localizada.