Entonces, estoy tratando de calcular la diferencia entre dos fechas ingresadas por el usuario con JavaScript; sin embargo, sigo recibiendo InvalidDate. Cualquier ayuda sería apreciada.
Aquí está mi código:
<!DOCTYPE html> <html> <head> <title>Assignment Calculator</title> </head> <body> <h1>Assignment Calculator</h1> <form> <label for="StartDate">Date to Start:</label> <input id="StartDate" name="StartDate" type="date"/> <label for="DueDate">Due Date:</label> <input id="DueDate" name="DueDate" type="date"/> <input type="submit" value="Submit" onclick="displayDates()"> </form> <script type = "text/javascript" > // Get start date and due date var startInput = document.getElementById("StartDate").value; var dueInput = document.getElementById("DueDate").value; var startDate = new Date(startInput); var dueDate = new Date(dueInput); // To calculate the time difference of two dates var DifferenceInTime = dueDate.getTime() - startDate.getTime(); // To calculate the no. of days between two dates var DifferenceInDays = DifferenceInTime / (1000 * 3600 * 24); function displayDates() { //To display the of days a student has to work on the assignment (result) document.write("Start your assignment by " + startDate + ".<br>" + "Finish your assignment by " + dueDate + ".<br> " + "You must complete your assignment in this many days: " + DifferenceInDays + "."); } </script> </body> </html>Casi todo su código javsascript debe moverse dentro de la función displayDates() .
Cuando está fuera del código, se ejecuta inmediatamente, por lo que las variables como startInput y dueInput se establecerán una vez y nunca más.
Su objetivo es averiguar startInput y dueInput después de que el usuario haga clic en el botón.
Está llamando a la función al hacer clic en el botón pero obteniendo el valor del campo de entrada en la carga de la página, incluso cuando los valores de datos no están seleccionados. debe poner esa parte también dentro de la función que está llamando al hacer clic en el botón.
function displayDates() { var startInput = document.getElementById("StartDate").value; var dueInput = document.getElementById("DueDate").value; var startDate = new Date(startInput); var dueDate = new Date(dueInput); // To calculate the time difference of two dates var DifferenceInTime = dueDate.getTime() - startDate.getTime(); // To calculate the no. of days between two dates var DifferenceInDays = DifferenceInTime / (1000 * 3600 * 24); //To display the of days a student has to work on the assignment (result) document.write("Start your assignment by " + startDate + ".<br>" + "Finish your assignment by " + dueDate + ".<br> " + "You must complete your assignment in this many days: " + DifferenceInDays + "."); }Solo necesita mover el código, que calcula la diferencia entre fechas en la función displayDates .
<!DOCTYPE html> <html> <head> <title>Assignment Calculator</title> </head> <body> <h1>Assignment Calculator</h1> <form> <label for="StartDate">Date to Start:</label> <input id="StartDate" name="StartDate" type="date"/> <label for="DueDate">Due Date:</label> <input id="DueDate" name="DueDate" type="date"/> <input type="submit" value="Submit" onclick="displayDates()"> </form> <script type = "text/javascript" > function displayDates() { // Get start date and due date var startInput = document.getElementById("StartDate").value; var dueInput = document.getElementById("DueDate").value; var startDate = new Date(startInput); var dueDate = new Date(dueInput); // To calculate the time difference of two dates var DifferenceInTime = dueDate.getTime() - startDate.getTime(); // To calculate the no. of days between two dates var DifferenceInDays = DifferenceInTime / (1000 * 3600 * 24); //To display the of days a student has to work on the assignment (result) document.write("Start your assignment by " + startDate + ".<br>" + "Finish your assignment by " + dueDate + ".<br> " + "You must complete your assignment in this many days: " + DifferenceInDays + "."); } </script> </body> </html>