Cambiando el curso del tiempo con Javascript
En Javascript, las fechas son uno de esos aspectos submarinos que a menudo se pasan por alto, pero que pueden ser vitales para muchos proyectos de programación. Hoy nos ocuparemos de esto, prestando especial atención al cálculo de fechas y a cómo estas pueden cambiar de valor mediante la activación de una casilla.
Inmersión en la fecha de Javascript
En primer lugar, para entender cómo se puede alterar el valor de una fecha en Javascript, es necesario entender cómo se manejan las fechas en este lenguaje de programación. Javascript posee un objeto incorporado llamado un Objeto Date que es utilizado para trabajar con fechas y tiempos.
let fecha = new Date(); console.log(fecha);
Eligiendo tu propio camino… y fecha
El ejemplo anterior mostraría la fecha y la hora actuales. Pero también podemos establecer una fecha personalizada pasándola como parámetro al objeto Date.
let fechaEspecifica = new Date('2022-03-23');
console.log(fechaEspecifica);
Haciendo cálculos temporales
Una vez que sabemos cómo crear fechas, podemos comenzar a hacer cálculos con ellas. Esto es especialmente útil cuando necesitamos realizar seguimientos de eventos, temporizadores y más.
let fechaUno = new Date('2022-03-23');
let fechaDos = new Date('2022-02-23');
let diferencia = Math.abs(fechaUno - fechaDos);
let diasDiferencia = Math.ceil(diferencia / (1000 * 60 * 60 * 24));
console.log(`Hay una diferencia de ${diasDiferencia} días entre las dos fechas.`);
Alterando fechas con casillas de verificación
Ahora, entremos en el aspecto final de nuestra discusión: ¿Cómo podemos alterar estos valores de fecha mediante la activación de una casilla de verificación?
Encadenamiento de eventos
Utilizaremos los eventos en Javascript. En particular, el evento ‘change’. Este evento se dispara cuando el estado de una casilla de verificación cambia.
let checkBox = document.getElementById('miCasilla');
checkBox.addEventListener('change', function() {
if(this.checked) {
// Código para alterar la fecha va aquí
}
});
Alterando la fecha
Ahora, dentro de nuestro evento ‘change’, podemos cambiar la fecha como queramos. En este caso, podríamos simplemente agregar un cierto número de días a nuestra fecha cuando la casilla esté marcada.
let fecha = new Date();
let checkBox = document.getElementById('miCasilla');
checkBox.addEventListener('change', function() {
if(this.checked) {
fecha.setDate(fecha.getDate() + 5);
console.log(fecha);
}
});
Adapta este proceso a tus necesidades
El ejemplo anterior es bastante simple, pero el concepto es lo que realmente importa. Puedes adaptar este proceso para cambiar la fecha de cualquier manera que necesites al marcar una casilla de verificación.