Artículo original escrito por: Joel Olawanle
Artículo original: How to Format Dates in JavaScript with One Line of Code
Traducido y adaptado por: Keiler Guardo Herrera

Durante mucho tiempo, he utilizado librerías como Date-fns siempre que he necesitado formatear fechas en JavaScript. Pero se hace muy raro cada vez que lo hago en pequeños proyectos que requieren formatos de fecha simples que JavaScript ofrece por defecto.

Descubrí que la mayoría de los desarrolladores lo hacen mucho. Y pensé que era la mejor manera hasta que recientemente descubrí que no siempre necesitamos usar bibliotecas para formatear fechas en JavaScript.

En caso de que tengas curiosidad por probarlo, aquí tienes el código:?

new Date().toLocaleDateString('en-us', { weekday:"long", year:"numeric", month:"short", day:"numeric"}) 
// "Friday, Jul 2, 2021"

Después de probar esto en tu propio código y ver que funciona, vamos a entender por qué funciona y aprender otras formas de formatear fechas en JavaScript con una sola línea de código.

Cómo formatear fechas en JS

Obtener la fecha en JavaScript no suele ser un problema, pero formatear estas fechas para que se adapten a tu proyecto puede ser engorroso para los principiantes. Por ello, la mayoría de la gente acaba utilizando bibliotecas.

El método más utilizado para obtener la fecha en JavaScript es el objeto new Date().

Por defecto, cuando ejecutas new Date() en tu terminal, utiliza la zona horaria de tu navegador y muestra la fecha como una cadena de texto completa, como Fri Jul 02 2021 12:44:45 GMT+0100 (horario de verano Británico).

Pero tener algo así en tu página web o aplicación no es profesional y no es fácil de leer. Así que esto te obliga a buscar mejores formas de formatear estas fechas.

Veamos algunos métodos que operan sobre el objeto date.

Los métodos de date en JavaScript

Hay muchos métodos que se pueden aplicar al objeto date. Puedes utilizar estos métodos para obtener información de un objeto date. Aquí están algunos de ellos:

  • getFullYear() – obtiene el año en formato de cuatro dígitos (yyyy)
  • getMonth() – recibe el mes como un número (0-11)
  • getDate() – obtiene el día como un número (1-31)
  • getHours() – obtiene la hora (0-23)

Y mucho más...

Desgraciadamente, la mayoría de estos métodos siguen necesitando mucho código para convertir las fechas al formato que deseamos.

Por ejemplo,  new Date().getMonth() dará como resultado 6, que significa julio. Para usar julio en mi proyecto, necesitaré tener un código largo como este que puede ser realmente engorroso:

const mesActual = new Date();
const meses = ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Setiembre", "Octubre", "Noviembre", "Diciembre"];
console.log(meses[mesActual.getMonth()]);

Veamos dos métodos que puedes utilizar para formatear tus fechas de la mejor manera para que puedas utilizarlas en tus proyectos.

El método toDateString() en JavaScript

El método de JavaScript toDateString() devuelve la parte de la fecha de un objeto date en forma de cadena utilizando el siguiente formato:

  1. Tres primeras letras del nombre del día de la semana
  2. Tres primeras letras del nombre del mes
  3. Dos dígitos del día del mes, rellenados a la izquierda con un cero si es necesario
  4. Año de cuatro dígitos (como mínimo), rellenado a la izquierda con ceros si es necesario
new Date().toDateString();
//"Fri Jul 02 2021"

Una de las principales desventajas de este método es la imposibilidad de manipular la salida de la fecha de la manera que queremos.

Por ejemplo, no nos da la posibilidad de mostrar las fechas según nuestro idioma. Veamos otro método que para mí sigue siendo uno de los mejores.

El método toLocaleDateString() en JavaScript

Este método devuelve el objeto date como una cadena utilizando las convenciones locales. También toma opciones como argumentos que le permiten a usted/sus aplicaciones personalizar el comportamiento de la función.

Sintaxis:

toLocaleDateString()
toLocaleDateString(localizaciones)
toLocaleDateString(localizaciones, opciones)

Veamos algunos ejemplos y sus resultados:

const fechaActual = new Date();

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

console.log(fechaActual.toLocaleDateString('de-DE', opciones));
//Freitag, 2. Juli 2021

console.log(fechaActual.toLocaleDateString('ar-EG', opciones))
// الجمعة، ٢ يوليو ٢٠٢١

console.log(fechaActual.toLocaleDateString('en-us', opciones));
//Friday, Jul 2, 2021


También puede decidir no utilizar ni locales ni opciones:

new Date().toLocaleDateString()
// "7/2/2021"

Y también puede decidir usar sólo las localizaciones. Esto producirá la misma información que la anterior basada en la zona horaria de mi navegador.

new Date().toLocaleDateString('en-US')
"7/2/2021"

También puedes decidir girar las opciones como quieras. Hay 4 opciones básicas que son:

  • weekday – Esto produce el día de la semana dependiendo de cómo quieras que aparezca (short or long).
  • year – Esto hace que el año sea un número
  • month – Esto genera el mes del año dependiendo de cómo quieras que aparezca (short or long).
  • day – Por último, esto produce el día como un número
new Date().toLocaleDateString('en-us', { weekday:"long", year:"numeric", month:"short"}) // "Jul 2021 Friday"

new Date().toLocaleDateString('en-us', { year:"numeric", month:"short"})
// "Jul 2021"

Conclusión

El objeto date tiene unos siete métodos de formateo. Cada uno de estos métodos le da un valor específico:

  1. toString() te entrega Fri Jul 02 2021 14:03:54 GMT+0100 (Horario de verano británico)
  2. toDateString() te entrega Fri Jul 02 2021
  3. toLocaleString() te entrega 7/2/2021, 2:05:07 PM
  4. toLocaleDateString() te entrega 7/2/2021
  5. toGMTString() te entrega Fri, 02 Jul 2021 13:06:02 GMT
  6. toUTCString() te entrega Fri, 02 Jul 2021 13:06:28 GMT
  7. toISOString() te entrega 2021-07-02T13:06:53.422Z

Si está buscando formatos de fecha más avanzados, entonces tendrá que crear un formato personalizado por sí mismo.