Si lo que tenemos en común todos los desarrolladores es que al empezar esta aventura en el mundo de la programación nos topamos en qué necesitamos en algún momento “formatear” una fecha, hay muchas maneras de hacerlo, unas más sencillas que otras, ahora te mostrare cómo hacerlo de manera “fácil”…

Te voy a enseñar diferentes formas de formatear una fecha en Javascript.

1. Método fácil.

Primero crearemos una función para pasarle la fecha que necesitemos.

function formatearFecha(fecha) {
    const options = { year: 'numeric', month: 'numeric', day: 'numeric' };
    return new Date(fecha).toLocaleDateString('es', options);
}

Vemos qué le pasamos la fecha a la funcion, también tenemos la constante options dónde podrás optar por el órden de la fecha original, en este caso es 2024-01-24 y por último pero no menos importante retornamos el resultado.

Para usarlo es fácil, te muestro por consola.

const fechaFormateada = formatearFecha('2024-01-24');
console.log(fechaFormateada);
// El resultado es: 1/24/2024

Si bien aquí ya tienes la solución, debes de saber que no es la única, ahora te muestro como mostrar el día y mes.

function formatearFechaConDiaMes(fecha) {
    const options = { day: 'numeric', month: 'long', year: 'numeric' };
    return new Date(fecha).toLocaleDateString('es', options);
}

Ejemplo de uso:

const fechaFormateada = formatearFechaConDiaMes('2024-01-24');
console.log(fechaFormateada);
// El resultado es: 24 de enero de 2024

Y prácticamente es lo mismo, ahora ¿ves que es sencillo?

Demo

2. Método complejo

Ahora te voy a mostrar como formatearla como la fecha de este artículo, necesito que prestes mucha atención, ya que la fecha en este caso es “2024-01-25T05:31:32.051Z”.

function formatearFecha(fechaISO) {
    const fechaFormateada = new Date(fechaISO);

    // Obteniendo los componentes de la fecha
    const dia = fechaFormateada.getDate();
    const mes = fechaFormateada.getMonth() + 1; // Los meses en JavaScript son indexados desde 0
    const anio = fechaFormateada.getFullYear();
    const hora = fechaFormateada.getHours();
    const minuto = fechaFormateada.getMinutes();
    const segundo = fechaFormateada.getSeconds();

    // Formateando la fecha y hora según el formato deseado
    const fechaFormateadaString = `${dia}/${mes}/${anio} ${hora}:${minuto}:${segundo}`;

    return fechaFormateadaString;
}

Ejemplo de uso:

// Ejemplo de uso
const fechaFormateada = formatearFecha("2024-01-25T05:31:32.051Z");
console.log(fechaFormateada);
// Resultado: 24/1/2024 23:31:32

Demo

3. Método “hace…” Con libreria (date-fns)

Si bien estás usando algún framework (en caso que no, te recomiendo usar uno) ya que los frameworks tienden a “ligerarnos” en la programación, exísten varias librerias para formatear fechas, en este caso te muestro con la librería date0-fns para React, Next.Js, entre otros.

Usarlo es facíl te muestro como:

// importa los hooks
import { formatDistance, subDays } from "date-fns";
import { es } from "date-fns/locale";

const fechaoriginal = "2024-01-25T05:31:32.051Z";
// en el DOM
return(
    {formatearFecha(fechaoriginal)} • {
        formatDistance(
            subDays(new Date(fechaoriginal), 0),
            new Date(),
            {
                addSuffix: true,
                locale: es,
            },
        )
    }
)

Esto te renderiza 24/1/2024 23:31:32 • hace 33 minutos < hace % puede variar según el momento que leas este artículo, en el momento que ejecuté el script eran las 12:05am del mismo día del artículo.

Ojo, que este hack se debe aplicar en tu codigo de Vite o tu favorito.

Conclusiones

Desde luego mi favorita es la última. No tiene desventajas, excepto el lío que te puedas hacer con las propiedades formatDistance y subDays, entre las demás.

En ocasiones la solución de formatear para las fechas es, usar librerias es interesante para aplicaciones tanto pequeñas como robustas (por ejemplo, ¡para cuándo se publicó este articulo!).

¡Espero que a partir de ahora ya no tengas problemas en formatear fechas! ✌️