n00b aquí!
Logré ensamblar el código JavaScript y no entiendo por qué no funciona correctamente.
El código está diseñado para calcular la diferencia entre una fecha determinada y la fecha de hoy. Supongo que mi lógica en el script no es correcta ya que no se muestra ningún error en la consola.
Aquí está el código:
function setDate(){ let thedate = document.getElementById("startDate").value; if (thedate){ document.getElementById("showinputhere").innerHTML = thedate; } else{ document.getElementById("showinputhere").innerHTML = "No Date set"; } } let today = new Date().toISOString().slice(0, 10) var startDate = startDate; // Start Date var endDate = today; // Today's Date { var diffInMs = new Date(endDate) - new Date(startDate) var diffInDays = diffInMs / (1000 * 60 * 60 * 24); document.getElementById("days").innerHTML = ("Day: ") + diffInDays; // Day Counter var diffInWeeks = diffInMs / (1000 * 60 * 60 * 24 * 7); document.getElementById("weeks").innerHTML = ("Week: ") + (diffInWeeks).toFixed(); // Week Counter if (diffInWeeks < 4) { stageStatus = ("<i class=\"fas fa-seedling\" ></i> Vegetation"); } else if (diffInWeeks > 6) { stageStatus = "<i class=\"fas fa-pepper-hot\" ></i> Harvesting"; } else { stageStatus = "<i class=\"fas fa-leaf\" ></i> Flowering"; } document.getElementById("stage").innerHTML = stageStatus; } <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </head> <body> <div class="card bg-secondary border-dark m-3 mb-3" style="width: 18rem;"> <!--SET START DATE USER INPUT--> <input type="date" id="startDate" ><br> <button onclick="setDate()">Set Date</button> <!--SET START DATE USER INPUT END--> <!-- SHOW THE CHOOSEN DATE--> <p id="showinputhere"></p> <!-- CHOOSEN DATE END--> <!--DISPLAY DAY & WEEK--> <div class="card-body text-center"> <div class="row"> <div class="col m-auto"> <div class="alert alert-light" role="alert"><h4><p id="days" class="mb-0"></p></h4></div> </div> <div class="col m-auto"> <div class="alert alert-light" role="alert"><h4><p id="weeks" class="mb-0"></p></h4></div> </div> </div> <!--DAY & WEEK END--> <!--STAGE START--> <div class="alert alert-success m-3" role="alert"> <span class="h4"><p id="stage" class="mb-0"></p></span> </div> <!--STAGE END--> </div> </div> Mi objetivo es lograr que el usuario ingrese la fecha de inicio y, a partir de ahí, debería ocurrir toda la magia, desafortunadamente, solo funciona cuando codifico la fecha aquí: var startDate = startDate; // Start Date de inicio así: var startDate = "2022/01/01"; // Start Date
Aquí está el JavaScript que funciona sin que el usuario ingrese la fecha:
let today = new Date().toISOString().slice(0, 10) var startDate = "2022/01/01"; // Start Date var endDate = today; // Today's Date { var diffInMs = new Date(endDate) - new Date(startDate) var diffInDays = diffInMs / (1000 * 60 * 60 * 24); document.getElementById("days").innerHTML = ("Day: ") + diffInDays; // Day Counter var diffInWeeks = diffInMs / (1000 * 60 * 60 * 24 * 7); document.getElementById("weeks").innerHTML = ("Week: ") + (diffInWeeks).toFixed(); // Week Counter if (diffInWeeks < 4) { stageStatus = ("<i class=\"fas fa-seedling\" ></i> Vegetation"); } else if (diffInWeeks > 6) { stageStatus = "<i class=\"fas fa-pepper-hot\" ></i> Harvesting"; } else { stageStatus = "<i class=\"fas fa-leaf\" ></i> Flowering"; } document.getElementById("stage").innerHTML = stageStatus; } <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </head> <body> <div class="card bg-secondary border-dark m-3 mb-3" style="width: 18rem;"> <!--SET START DATE USER INPUT <input type="date" id="startDate" ><br> <button onclick="setDate()">Set Date</button> <!--SET START DATE USER INPUT END--> <!--SHOW THE CHOOSEN DATE <p id="showinputhere"></p> CHOOSEN DATE END--> <!--DISPLAY DAY & WEEK--> <div class="card-body text-center"> <div class="row"> <div class="col m-auto"> <div class="alert alert-light" role="alert"><h4><p id="days" class="mb-0"></p></h4></div> </div> <div class="col m-auto"> <div class="alert alert-light" role="alert"><h4><p id="weeks" class="mb-0"></p></h4></div> </div> </div> <!--DAY & WEEK END--> <!--STAGE START--> <div class="alert alert-success m-3" role="alert"> <span class="h4"><p id="stage" class="mb-0"></p></span> </div> <!--STAGE END--> </div> </div>Gracias por mirar
Hice algunos ajustes para calcular los días de floración:
document.getElementById('startDate').valueAsDate = new Date(); calcule(); function calcule() { let date = document.getElementById("startDate").value; var diffInMs = new Date() - new Date(date); var diffInDays = diffInMs / (1000 * 60 * 60 * 24); var labelDay = diffInDays > 2 ? "Days: " : "Day: "; document.getElementById("days").innerHTML = labelDay + Math.round(diffInDays * 100) / 100; // Day Counter var diffInWeeks = diffInMs / (1000 * 60 * 60 * 24 * 7); var labelWeek = diffInDays > 2 ? "Weeks: " : "Week: "; document.getElementById("weeks").innerHTML = labelWeek + (diffInWeeks).toFixed(); // Week Counter if (diffInWeeks < 4) { stageStatus = ("<i class=\"fas fa-seedling\" ></i> Vegetation"); } else if (diffInWeeks > 6) { stageStatus = "<i class=\"fas fa-pepper-hot\" ></i> Harvesting"; } else { stageStatus = "<i class=\"fas fa-leaf\" ></i> Flowering"; } document.getElementById("stage").innerHTML = stageStatus; } <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <div class="card bg-secondary border-dark m-3 mb-3" style="width: 18rem;"> <!--SET START DATE USER INPUT--> <input type="date" id="startDate" onchange="calcule()"><br> <!--DISPLAY DAY & WEEK--> <div class="card-body text-center"> <div class="row"> <div class="col m-auto"> <div class="alert alert-light" role="alert"> <h4> <p id="days" class="mb-0"></p> </h4> </div> </div> <div class="col m-auto"> <div class="alert alert-light" role="alert"> <h4> <p id="weeks" class="mb-0"></p> </h4> </div> </div> </div> <!--DAY & WEEK END--> <!--STAGE START--> <div class="alert alert-success m-3" role="alert"> <span class="h4"><p id="stage" class="mb-0"></p></span> </div> <!--STAGE END--> </div> </div>