Dar formato a una fecha con JavaScript Vanilla

¡Las fechas! 🥲 son sin duda un problema trabajar con ellas. Al menos a mi siempre me generan problemas y no problemas graves, problemas que son simples de solucionar pero que me llevan al bloqueo. 😬 🚩

El asunto es que hoy quería compartir con ustedes un método muy bonito, nativo de JavaScript que sirve para generar fechas con el formato que esperamos que se muestre. ¡Por lo tanto las fechas ya no son un problema! 😎

Dar formatos a fechas con javascript

Si escribimos en la consola "new Date();" JavaScript nos devolverá un string como este: "Thu Sep 14 2023 18:38:01 GMT-0300 (hora de verano de Chile)" 😕 Mire inténtentelo usted mismo con el siguiente código:

const date = new Date();
console.log(date);
// retorno esperado: Thu Sep 14 2023 18:39:47 GMT-0300 (hora de verano de Chile)

🧑‍🔬 Bueno, por suerte en JavaScript existe el método ".toLocaleDateString()" y si miramos la documentación de MDN se pueden lograr cosas bonitas como lo siguiente:

// Definimos nuestra fecha:
const date = new Date()
        .toLocaleDateString("es-CL", {
           day: "2-digit",
           weekday: "long",
           month: "long",
           year: "numeric",
           timeZone: 'America/Santiago'
        });
// La mostramos
console.log(date)
// Salida esperada: jueves, 14 de septiembre de 2023

📚 Las opciones de configuración están todas descritas en la documentación y son bastantes para lograr la visualización de la fecha como gustes. ✅

☝️ Lo primero que recibe la función de .toLocaleDateString es le zona local horaria y puedes ver la lista completa en esta web. En mi caso como soy de Chile usé "es-CL" pero si eres de España, por ejemplo, sería "es-ES" o de Estados Unidos sería "en-US" y así.

📝 Por ejemplo en el código anterior le decimos que muestre los días en "2-digit" por eso dice 14, en cambio le decimos que el día de la semana "weekday" sea "long" lo que hace que se muestre el nombre del día, en este caso "jueves" y lo mismo con el mes. También que el año sea "numeric" por eso aparece como 2023. ✨

Y así se pueden hacer un sin fin de combinaciones que puedes ir probando. Lo bueno de todo esto que para la mayoría de los casos ya no necesitas una librería externa para dar formato a las fechas. 🥳🎉