javascript

JavaScript: ciclo con fechas (recorrer período de tiempo)

En este post veremos cómo iterar un período de fechas con JavaScript usando un ciclo. Es decir, ir de una fecha a otra con un intervalo de días.

Con este código podremos ir de una fecha de inicio a una fecha de fin saltando entre días, horas, meses, años o cualquier período de tiempo.

Gracias a esto podremos, por ejemplo, recorrer un año saltando de semana a semana. Esto servirá para generar fechas de pagos o cualquier otra cosa interesante que necesitemos.

Explicación del algoritmo

En varios lenguajes de programación podemos representar las fechas como los segundos o milisegundos transcurridos desde la fecha Unix, es decir, el 1 de enero de 1970.

De hecho creo que todos los lenguajes lo hacen así y al final simplemente formatean esa cantidad de segundos.

Entonces para hacer un ciclo que inicia y termina en una fecha con JavaScript podemos usar ese número entero de milisegundos transcurridos para ir saltando de fecha en fecha, creando una nueva fecha en cada paso.

Nota: esto ya lo habíamos hecho con PHP hace algún tiempo.

Ciclo con fechas en JavaScript

Vamos al código con JS. Es como un ciclo for, pero en este caso la variable i es la cantidad de milisegundos.

Y en el paso de la asignación, creamos un nuevo objeto de tipo Date al cual le asignamos lo que devuelva getTime de la fecha sumando al incremento. Así de simple.

En el siguiente ejemplo vamos del 1 de enero de 2021 al 31 de diciembre de ese mismo año, incrementando semana por semana:

// https://parzibyte.me/blog
const inicio = new Date("2021-01-01T00:00:00");
const fin = new Date("2021-12-31T00:00:00");
const UN_DIA_EN_MILISEGUNDOS = 1000 * 60 * 60 * 24;
const INTERVALO = UN_DIA_EN_MILISEGUNDOS * 7; // Cada semana
const formateadorFecha = new Intl.DateTimeFormat('es-MX', { dateStyle: 'medium', });

for (let i = inicio; i <= fin; i = new Date(i.getTime() + INTERVALO)) {
 console.log(formateadorFecha.format(i));
}

La salida para el ejemplo es:

1 ene. 2021
8 ene. 2021 
15 ene. 2021
22 ene. 2021
29 ene. 2021
5 feb. 2021 
12 feb. 2021
19 feb. 2021
26 feb. 2021
5 mar. 2021 
12 mar. 2021
19 mar. 2021
26 mar. 2021
2 abr. 2021 
9 abr. 2021 
16 abr. 2021
23 abr. 2021
30 abr. 2021
7 may. 2021 
14 may. 2021
21 may. 2021
28 may. 2021
4 jun. 2021 
11 jun. 2021
18 jun. 2021
25 jun. 2021
2 jul. 2021
9 jul. 2021
16 jul. 2021
23 jul. 2021
30 jul. 2021
6 ago. 2021
13 ago. 2021
20 ago. 2021
27 ago. 2021
3 sep. 2021
10 sep. 2021
17 sep. 2021
24 sep. 2021
1 oct. 2021
8 oct. 2021
15 oct. 2021
22 oct. 2021
29 oct. 2021
5 nov. 2021
12 nov. 2021
19 nov. 2021
26 nov. 2021
3 dic. 2021
10 dic. 2021
17 dic. 2021
24 dic. 2021
31 dic. 2021

Nota: hay más formatos para la fecha. Más abajo te dejaré un enlace donde te enseño cómo formatear la fecha.

Más ejemplos

Recorrer intervalo de fechas con JavaScript – Ciclo con período de tiempo

No nos limitamos a días. También podemos recorrer un rango de fechas con JavaScript incrementando por minutos.

En el siguiente ejemplo marcamos la fecha y hora cada 45 minutos, desde el 1 de enero a medianoche hasta el 2 de enero:

// https://parzibyte.me/blog
const inicio = new Date("2021-01-01T00:00:00");
const fin = new Date("2021-01-02T00:00:00");
const UN_MINUTO_EN_MILISEGUNDOS = 1000 * 60;
const INTERVALO = UN_MINUTO_EN_MILISEGUNDOS * 45;
const formateadorFecha = new Intl.DateTimeFormat('es-MX', { dateStyle: 'medium', timeStyle: "medium" });

for (let i = inicio; i <= fin; i = new Date(i.getTime() + INTERVALO)) {
 console.log(formateadorFecha.format(i));
}

La salida ya la has visto en la imagen que acompaña al encabezado de esta sección. Como puedes ver solo es cuestión de cambiar el intervalo y jugar con los milisegundos.

Recuerda que estoy usando el formateador de fechas de JavaScript con Intl para mostrar el objeto de tipo Date de una manera amigable para el usuario.

Este código que recorre fechas con un ciclo puede ejecutarse en el navegador o en el servidor con Node, ya que al final es JS.

Por aquí te dejo más posts de JavaScript.

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

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…

3 días 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…

3 días 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…

3 días hace

Errores de Comlink y algunas soluciones

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

3 días 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…

3 días hace

Solución: Apache – Server unable to read htaccess file

Ayer estaba editando unos archivos que son servidos con el servidor Apache y al visitarlos…

4 días hace

Esta web usa cookies.