Estoy realizando un ejercicio que me solicita: "crea tres selects: uno para año, otro para mes y otro para día. Has de mostrar el número de días correcto para el mes y año y luego crear un objeto Date para mostrar por pantalla la fecha seleccionada". Bien, he aquí mi código HTML:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Básico 5 Fechas</title>
<script src="main.js"></script>
<!-- Crea una página dónde a partir de tres selects con el día del mes, el mes y el año puedas construir un objeto Date,
para mostrarlo por pantalla en formato local. Observa qué pasa cuando introduces una fecha que no existe. Invierte los selects para ponerlos año/mes/día. Cuando elija el mes, que me los cargue con el número de días que tiene el mes. Se valida que haya año seleccionado, luego mes seleccionado y luego días. -->
</head>
<body>
<h2>Este pequeño programa te mostrará la fecha escogida por pantalla</h2>
<form>
<select id="anio" onchange="cargarNumeroDias()"></select>
<select id="mes" onchange="cargarNumeroDias()"></select>
<select id="dia"></select>
<button type="button" id="button" onclick="mostrar()">Mostrar en pantalla la fecha</button>
</form>
<div id="output"></div>
</body>
</html>
Y he aquí mi código en JavaScript:
function cargarPagina() {
let anioMinimo = 1900;
let anioMaximo = 2020;
let anio = 0;
let comboAnio = document.getElementById("anio");
for (let i = anioMinimo; i <= anioMaximo; i++) {
let option = document.createElement("option"); //Con esto creo la etiqueta option
option.setAttribute("value", i); //Con esto le seteo el valor (pero de forma interna, el usuario no ve este valor)
let optionText = document.createTextNode(i); //Con esto le seteo la opción que yo como usuario veo
option.appendChild(optionText); //Con esto meto el optionText en la etiqueta Option
comboAnio.appendChild(option); //Con esto meto el option en el comboAnio, que es lo que está vinculado a la etiqueta
}
let array = [
"enero", "febrero", "marzo", "abril", "mayo", "junio", "julio", "agosto", "septiembre", "octubre", "noviembre", "diciembre"
]; //Le meto todos los meses y hago lo mismo
let comboMes = document.getElementById("mes");
for (let i = 0; i < array.length; i++) {
let option=document.createElement("option"); //Con esto le creo la etiqueta option
option.setAttribute("value", i); //Con esto le seteo el valor (pero de forma interna, el usuario no ve este valor)
let itexto="";
switch(i){
case 0: itexto="enero";
break;
case 1: itexto="febrero";
break;
case 2: itexto="marzo";
break;
case 3: itexto="abril";
break;
case 4: itexto="mayo";
break;
case 5: itexto="junio";
break;
case 6: itexto="julio";
break;
case 7: itexto="agosto";
break;
case 8: itexto="septiembre";
break;
case 9: itexto="octubre";
break;
case 10: itexto="noviembre";
break;
case 11: itexto="diciembre";
break;
}
let optionText=document.createTextNode(itexto); //Con esto le seteo la opción que yo como usuario veo
option.appendChild(optionText); //Con esto meto el optionText en la etiqueta Option
comboMes.appendChild(option); //Con esto meto el option en el comboMes, que es lo que está vinculado a la etiqueta
}
//Cuando pulso año o mes lanza un evento Onchange que calcula el número de días del mes (CalcularDiasMes).
//Tras esto, creo un objeto Date con los valores del select.
//Ya con el objeto Date, lo muestro en pantalla con date.InnerHTML() y hecho
}
function cargarNumeroDias(){
let comboDia=document.getElementById("dia");
let numeroDias=calcularDiasMes(anio, mes); //Con esto cojo el número de días para el mes y el año en concreto
let numeroDiasArray=[numeroDias]; //Creo un array con el número de días
for (let i= 0; i < numeroDiasArray.length; i++) {
let option=document.createElement("option"); //Con esto le creo la etiqueta option
option.setAttribute("value", i); //Con esto le seteo el valor (pero de forma interna, el usuario no ve este valor)
let optionText=document.createTextNode(i); //Con esto le seteo la opción que yo como usuario veo
option.appendChild(optionText); //Con esto meto el optionText en la etiqueta Option
comboDia.appendChild(option); //Con esto meto el option en el comboDia, que es lo que está vinculado a la etiqueta
}
}
function calcularDiasMes(anio, mes) {
let numeroDias = -1;
switch (mes) {
case 1:
case 3:
case 5:
case 7:
case 8:
case 10:
case 12:
numeroDias = 31;
break;
case 4:
case 6:
case 9:
case 11:
numeroDias = 30;
break;
case 2:
if ((anio % 4 == 0 && anio % 100 != 0) || (anio % 100 == 0 && anio % 400 == 0)) { //Con esto sé si es bisiesto o no
numeroDias = 29;
} else {
numeroDias = 28;
}
break;
}
return numeroDias;
}
window.onload = cargarPagina; //Para que esta función se cargue cuando se inicia la página
El caso es que depurando cuando selecciono año o mes, se me carga un 0 en el select de los días, y ya he observado que esto se debe a que let ComboDias=calcularDiasMes(anio,mes) me devuelve un valor -1. Pero me he bloqueado y no sé como seguir. ¿Alguna ayuda para arreglar este código? Muchas gracias :)