The Digital Mike

Buenos días, hoy les traigo un pequeño script que les permitirá automatizar cualquier fecha que deseen presentar en su sitio web. El proyecto vino a razón de una necesidad de automatizar un segmento en una pagina web de un cliente, el cual hasta ese momento, debían hacerlo manualmente. Todas las semanas, se debía cambiar las fechas de inicio y finalización de un evento o promoción. Como cambiar fechas de forma automática, les permitirá crear esta acción.

Debido a esto se me fue pedido el elaborar un código que le permitiera a la web cambiar las fechas de forma automática. Sin mas aquí les dejo el ejemplo, este puede ser usado en cualquier lugar que deseen.

Para el contenido en HTML para presentar el resultado es bien sencillo. En el lugar donde deseen cambiar la fecha de forma automática, deben agregar un atributo de «id» con el nombre que mas les guste. Yo use sd6, debido a que lo estoy usando para presentar promociones. Mis fechas van a estar encapsuladas dentro de un «<span></span>«; un para inicio y otra para la fecha de culminación. Aquí les dejo el ejemplo:

<p class="startdate">fecha inicial :-: <span id="sd6"></span> :-: | fecha final :-: <span id="ed6"></span></p>

El código aquí abajo esta elaborado para generar las fechas en JavaScript. Las variables «startDate» y «endDate» van a contener todos los «id«, lo mismo funcionara para una sola variable o como un arreglo de multiple variable. La diferencia va a estar en, cuantas fechas quieres automatizar al mismo tiempo.

El truco esta en capturar y mantener la fecha de inicio por una semana. Al final de la semana o de la fecha elegida, esta fecha va a cambiar automáticamente. La fecha de culminación es la mas fácil, porque va a ser solamente la fecha inicial mas la cantidad de días que el evento dure. De esta manera cada vez que cambie la fecha inicial, siempre tendremos el rango de días para la fecha final. Sin mas aquí les dejos el código en JavaScript:

<script>

var startDate = [document.getElementById('sd6')];
	var endDate = [document.getElementById('ed6')];

	let sday = new Date(), eday = new Date(), day = sday.getDay(), days =6;

	sday.setDate(sday.getDate() - (day+2)%7); 
	eday.setDate(sday.getDate() + (day+1)%7); 

	startDate.forEach(el =>{el.innerHTML = sday.toLocaleDateString()});
	endDate.forEach(el =>{el.innerHTML = eday.toLocaleDateString()});	
</script>	

El resultado final se los dejo aquí, como en vivo en codepen.

Si deseas saber mas, revisa las otras entradas sobre JavaScript o de banners.