En este tutorial crearemos una visualización de días en una semana usando JavaScript. Este código se mostrará los días en una semana cuando el usuario envíe la entrada del formulario. El código usa onclick() para llamar a una función que mostrará una lista de matrices que consisten en días que usan for loop para recorrer la posición de índice de las matrices en forma de días laborables. Este es un programa gratuito.
Empezando
Este es el enlace para la rutina de carga que se ha utilizado para el diseño de la calculadora https://getbootstrap.com/.
La Interfaz Principal
Este código contiene la interfaz de la aplicación. Para crear esto simplemente escriba este bloque de código dentro del editor de texto y guárdelo como index.html.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<a class="navbar-brand" href="https://compubinario.com">CompuBinario</a>
</div>
</nav>
<div class="col-md-3"></div>
<div class="col-md-6 well">
<h3 class="text-primary">Mostrar Días de una Semana usando JavaScript</h3>
<hr style="border-top:1px dotted #ccc;"/>
<div class="col-md-4">
<form>
<div class="form-group">
<label>Ingrese una Fecha</label>
<input type="date" id="date" class="form-control"/>
<br />
<center><button type="button" onclick="getDays();" class="btn btn-primary"><span class="glyphicon glyphicon-save"></span> Obtener Semanas</button></center>
</div>
</form>
</div>
<div class="col-md-8">
<div id="result"></div>
</div>
</div>
</body>
<script src="js/script.js"></script>
</html>
Crear la Función Principal
Este código contiene la función principal de la aplicación. Este código actualizado días en una semana cuando se hace clic en el botón. Para hacer esto, simplemente copie y escriba este bloque de códigos como se muestra a continuación dentro del editor de texto y luego guárdelo como script.js dentro de la carpeta js.
function calculateWeek(date){
var days = new Array();
for (var i = 0; i < 7; i++){
days[i] = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 1 + i);
}
return days;
}
function getDays(){
var date = document.getElementById('date');
if(date.value == ""){
alert("Ingrese una Fecha!");
}else{
var months= ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"];
var days = ['Domingo', 'Lunes', 'Martes', 'Miercoles', 'Jueves', 'Viernes', 'Sabado'];
var newDate = new Date(date.value);
var dates = new Array();
dates = calculateWeek(newDate);
var data ="<h2 class='alert-info'>Semanas de "+date.value+"</h2>";
for(var i=0; i < dates.length; i++){
data += "<label>"+days[dates[i].getDay()]+": <span class='text-info'>"+months[dates[i].getMonth()]+" "+dates[i].getDate()+", "+dates[i].getFullYear()+"</span></label><br />";
}
document.getElementById('result').innerHTML = data;
}
}
Ahí lo tienes, creamos con éxito una visualización de días en una semana usando JavaScript. Espero que este sencillo tutorial te ayude a lo que estás buscando.
Antes de la descarga del Tutorial presiona el siguiente enlace para que te suscribas a nuestro Canal de YouTube:
