Estoy usando javascript para obtener el valor del campo de entrada de formulario con getElementById("myTextInputID")
¿Cómo puedo aumentar la fecha en 21 días (3 semanas) y asignar esta nueva fecha como máximo en el campo de fecha con el nombre end_date ?
Lo que probé con new Date() y addDays(21) no me funciona.
<form action ="form_page.php" method="post"> <div id="standardPanel">*Task / Person: <input type="text" name="product" required ></div> <div id="standardPanel">*Description: <input type="text" name="customer" required ></div> <div id="standardPanel">*Date: <input id="myTextInputID" type="date" name="manufacture_one" required ></div> <p class="flip" onclick="showEndDate()">Click to add End Date</p> <div id="panel"> End Date: (holidays only) <input type="date" name="end_date"> </div> <div><input id="submit" name="action" type="submit" value="submit"/></div> </form> <script> function showEndDate() { var inputValue = document.getElementById("myTextInputID").value; if(inputValue != "") { document.getElementById("panel").style.display = "block"; } else { alert("Date cannot be blank"); } var inputValue = new Date(document.getElementById("myTextInputID").value); inputValue.addDays(21); document.getElementsByName('end_date')[0].setAttribute("max", inputValue); } </script>```El método addDays no existe . Debe utilizar el método setDate() .
let dateInput = document.getElementById("dateInput"); dateInput.addEventListener("change", () => { console.log("eventWorking"); var inputValue = dateInput.value; var inputDate = new Date(inputValue); console.log(inputDate); // Adding 21 days using setDate inputDate.setDate(inputDate.getDate() + 21); console.log(inputDate); }) Date: <input id="dateInput" type="date" name="manufacture_one" required > En resumen , puede simplemente reemplazar la línea inputValue.addDays(21); con inputValue.setDate(inputValue.getDate() + 21);
¡Pero evite usar el mismo nombre de var dos veces en el mismo método! Como le traerá problemas y es fácil encontrar dos nombres diferentes
Utiliza el método setDate para agregar la cantidad deseada de días a un objeto de fecha existente y, para simplificar la salida al campo end_date en lugar de simplemente usar el value , puede usar valueAsDate como se muestra a continuación.
Por cierto, los atributos de ID DEBEN ser únicos y, en la mayoría de los casos, no son realmente necesarios, ya que la identificación de los elementos DOM se puede realizar de otras formas, como querySelector . Quizás también valga la pena señalar que el uso de controladores de eventos inline no se considera la mejor práctica hoy en día: los controladores de eventos registrados externamente son mucho más limpios '-)
document.querySelector('p.flip').addEventListener('click',function(e){ let manufacture_date=this.parentNode.querySelector('[name="manufacture_one"]'); let end_date=this.parentNode.querySelector('[name="end_date"]'); if( manufacture_date.value=='' ){ alert('Date cannot be blank'); return false; } let mdate=new Date( manufacture_date.value ); let ndate=new Date( mdate.setDate( mdate.getDate() + 21 ) ); end_date.valueAsDate=ndate; }); <form action="form_page.php" method="post"> <div>*Task / Person: <input type="text" name="product" required /></div> <div>*Description: <input type="text" name="customer" required /></div> <div>*Date: <input type="date" name="manufacture_one" required /></div> <p class="flip">Click to add End Date</p> <div id="panel">End Date: (holidays only) <input type="date" name="end_date"></div> <input type="submit" /> </form> O bien, una alternativa que utiliza un detector de eventos de change vinculado al campo de entrada de fecha de manufacture_one para que el usuario no necesite hacer clic en el enlace "haga clic aquí para..." para calcular la nueva fecha.
document.querySelector('[name="manufacture_one"]').addEventListener('change',function(e){ if( this.value=='' ){ alert('Date cannot be blank'); return false; } let mdate=new Date( this.value ); document.forms.dates.end_date.valueAsDate=new Date( mdate.setDate( mdate.getDate() + 21 ) ); }); <form name='dates' action="form_page.php" method="post"> <div>*Task / Person: <input type="text" name="product" required /></div> <div>*Description: <input type="text" name="customer" required /></div> <div>*Date: <input type="date" name="manufacture_one" required /></div> <div id="panel">End Date: (holidays only) <input type="date" name="end_date"></div> <input type="submit" /> </form>