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.
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.
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.
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.
En este post te enseñaré a imprimir la letra ñ en una impresora térmica. Voy…
En este post te quiero compartir mi experiencia tramitando un acta de nacimiento de México…
Hoy te voy a presentar un creador de credenciales que acabo de programar y que…
Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…
En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…
En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…
Esta web usa cookies.