Al ingresar una primera fecha en el campo de formulario con ID dateInput y ejecutar la función showEndDate , inputDate + 21 days se envía a la consola con éxito, pero no se establece un máximo en el campo de formulario con ID end_date . ¿Qué es incorrecto con mi uso de setAttribute("max", inputDate) . ?
Probé ingresando un valor fijo como setAttribute("max", '2021-10-31') y esto funciona, ¡ el 31 de octubre se establece correctamente como el valor máximo superior en el campo de fecha! :( :S
// Declare values for use in functions let dateInput = document.getElementById("dateInput"); var endDateInput = document.getElementById("end_date"); // Shows the end date field function showEndDate() { var inputValue = dateInput.value; var inputDate = new Date(inputValue); if(inputValue != "") { document.getElementById("panel").style.display = "block"; } else { alert("Date cannot be blank"); } inputDate.setDate(inputDate.getDate() + 21); console.log(inputDate); endDateInput.setAttribute("max", inputDate); } <input id="dateInput" type="date" name="manufacture_one" required ></div>también fecha de finalización:
<input id="end_date" type="date" name="holiday_end_date" >inputDate es una Date , pero los valores de los atributos son cadenas. Por lo tanto, la fecha se convierte en cadena mediante el método toString predeterminado, que no proporciona la fecha en el formato esperado del atributo max .
Deberá formatearlo explícitamente. Hay muchas formas de hacerlo, una de las cuales ( si desea la fecha en UTC [y sí, importa incluso solo para fechas sin hora]) es inputDate.toString().substring(0, 10) . Pero de nuevo, eso será en UTC. Si desea la hora local, tendrá que formatearla de otra manera. Hay muchos ejemplos de fechas de formato aquí en SO ( aquí, por ejemplo) y en la web.