Dar formato a una fecha con JavaScript Vanilla

¡Las fechas! 🥲 Son sin duda un problema trabajar con ellas. Al menos a mí siempre me generan problemas, y no problemas graves, sino 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! 😎

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éntelo 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 .toLocaleDateString es la zona horaria local, 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 sinfín de combinaciones que puedes ir probando. Lo bueno de todo esto es que, para la mayoría de los casos, ya no necesitas una librería externa para dar formato a las fechas. 🥳🎉