I'm using javascript to get the value of form input field with getElementById("myTextInputID")
How can I increase the date by 21 days (3 weeks) and assign this new date as a max in the date field with name end_date ?
What I have tried with new Date() and addDays(21) is not working for me.
<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>```
The addDays method doesn't exist. You need to use the setDate() method.
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 >In summary you can just replace the line inputValue.addDays(21); with inputValue.setDate(inputValue.getDate() + 21);
But avoid using the same var name two times in the same method ! As it will be bring you problems and it is easy to find two differents name
You use the setDate method to add the desired amount of days to an existing date object and, for simplicity in outputting to the end_date field rather than simply use value you can use valueAsDate as below.
Incidentally ID attributes MUST be unique and in most cases are not really required as identification of DOM elements can be done in other ways such as querySelector. Also perhaps worth noting is that the use of inline event handlers is not considered best practise nowadays - externally registered event handlers are much cleaner '-)
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>Or, an alternative that uses a change event listener bound to the manufacture_one date input field so that the user does not need to click the "click here to..." link to calculate the new date.
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>