fechas

Formatear fechas en JavaScript

En este post voy a mostrarte una forma de formatear la fecha (o en términos específicos un objeto de tipo Date) en JavaScript.

No vamos a usar el método toLocaleString ni parecidos, crearemos un método propio ya que aunque hay métodos que pueden servir mejor, en ocasiones es necesario formatear la fecha en JavaScript de acuerdo a un formato manual.

Nota: si tú prefieres usar un método más elegante puedes usar DateTimeFormat de JS.

Métodos importantes de Date

Los objetos que son una instancia de Date tienen algunos métodos importantes. Entre ellos:

getFullYear: obtiene el año de 4 dígitos por ejemplo 2020

getMonth: obtiene el mes como un entero, comenzando en 0 para enero y terminando en 11 para diciembre

getDate: obtiene el día del mes, del 1 al 31 (en caso de que el mes tenga 31 días)

Así que con esto ya podemos crear nuestro propio formateador en forma de función. Por cierto, este método también funciona para la hora, pero eso será cosa de otro post.

Formatear fecha en JavaScript

Te voy a mostrar la función que uso para formatear la fecha en el formato YYYY-MM-DD por ejemplo 2020-03-21 (con cero a la izquierda incluido en caso de ser necesario). La función queda así:

const formatearFecha = fecha => {
    const mes = fecha.getMonth() + 1; // Ya que los meses los cuenta desde el 0
    const dia = fecha.getDate();
    return `${fecha.getFullYear()}-${(mes < 10 ? '0' : '').concat(mes)}-${(dia < 10 ? '0' : '').concat(dia)}`;
};

Lo que estoy haciendo es obtener el mes y el día por separado. Al mes le sumo 1. Después utilizo las plantillas de cadena o backticks (${}) para evaluar si el mes es menor a diez para agregarle un cero a la izquierda.

Hago lo mismo con el día (excepto lo de sumarle 1), y regreso el resultado de concatenar todo ello, usando también guiones para unirlos.

Probando código

Ahora veamos el código completo con una pequeña prueba.

// https://parzibyte.me/blog
const formatearFecha = fecha => {
    const mes = fecha.getMonth() + 1; // Ya que los meses los cuenta desde el 0
    const dia = fecha.getDate();
    return `${fecha.getFullYear()}-${(mes < 10 ? '0' : '').concat(mes)}-${(dia < 10 ? '0' : '').concat(dia)}`;
};

// Probar con la fecha de hoy
const fechaDeHoy = new Date();
const fechaFormateada = formatearFecha(fechaDeHoy);
console.log(fechaFormateada);

Si quieres puedes ejecutarlo en línea.

Conclusión

Con este método puedes formatear la fecha a tu modo y a tu gusto. En lugar de guiones podrías usar barras / o también podrías colocar primero el día, luego el mes, el año, etcétera.

Si te gusta JavaScript te invito a aprender más en mi blog.

Estoy aquí para ayudarte 🤝💻


Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.
parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

Entradas recientes

Creador de credenciales web – Aplicación gratuita

Hoy te voy a presentar un creador de credenciales que acabo de programar y que…

1 semana hace

Desplegar PWA creada con Vue 3, Vite y SQLite3 en Apache

Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…

2 semanas hace

Arquitectura para wasm con Go, Vue 3, Pinia y Vite

En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…

2 semanas hace

Vue 3 y Vite: crear PWA (Progressive Web App)

En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…

2 semanas hace

Errores de Comlink y algunas soluciones

Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…

2 semanas hace

Esperar promesa para inicializar Store de Pinia con Vue 3

En este artículo te voy a enseñar cómo usar un "top level await" esperando a…

2 semanas hace

Esta web usa cookies.