Hace un tiempo te mostré cómo formatear fechas en JavaScript pero lo hacíamos de manera manual extrayendo el año, mes, día, etcétera y concatenándolos.
Hoy te voy a mostrar la forma correcta de hacerlo, respetando además el locale. De este modo podrás formatear fechas para distintos lugares y países. Para ello vamos a usar DateTimeFormat
.
La fecha que vamos a formatear debe ser una instancia de Date
. Si es la fecha actual puedes crearla con:
const fecha = new Date();
Y si lo tienes en una cadena (que puede venir de una base de datos, el backend, etcétera) puedes construir una nueva fecha pasándole la cadena. Así:
const fecha = new Date(fecha_como_cadena);
Si me preguntas, yo guardo las fechas en formato YYYY-MM-DDTHH:MM:SS
, por ejemplo, 2021-04-27T11:17:00
.
Vamos a crear una instancia de Intl.DateTimeFormat
para poder formatear nuestra fecha. El constructor recibe como primer argumento el locale
que básicamente es el país o lugar para el que quieres formatear.
En mi caso voy a crear un formateador para español de México así que el locale
es es-MX
.
// https://parzibyte.me/blog
const formateador = new Intl.DateTimeFormat('es-MX', { dateStyle: 'medium', timeStyle: 'medium' });
Para el segundo argumento tenemos varias opciones en donde podemos especificar, entre muchas otras cosas, el estilo de la fecha y de la hora. Aquí podemos controlar la longitud de la fecha de algún modo.
Ahora que tenemos el formateador y la fecha en JavaScript es momento de combinarlos. Para ello el código completo queda así:
// https://parzibyte.me/blog
const formateador = new Intl.DateTimeFormat('es-MX', { dateStyle: 'medium', timeStyle: 'medium' });
const fecha = new Date();
const fechaFormateada = formateador.format(fecha);
console.log("La fecha formateada es:\n" + fechaFormateada);
Lo único que tenemos que hacer es invocar al método llamado format
, mismo que va a devolver una cadena con la fecha y hora formateadas. La salida para este caso es: 4 may 2021 15:30:51.
Como puedes ver, el formato es correcto y entendible. Si ponemos en full
a dateStyle
y timeStyle
tenemos algo así: lunes, 5 de abril de 2021 a las 16:26:09 hora de verano central.
Te dejo con la documentación en la página de MDN, ahí podrás encontrar más opciones.
Y ya a partir de aquí puedes darle formato a las fechas sin importar el locale
. Por cierto, esto también es compatible con Node.js del lado del servidor. Todo dependerá de los locales soportados.
Para terminar, te dejo con más posts sobre JavaScript.
Hoy te voy a presentar un creador de credenciales que acabo de programar y que…
Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…
En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…
En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…
Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…
En este artículo te voy a enseñar cómo usar un "top level await" esperando a…
Esta web usa cookies.