When entering a first date in form field with ID dateInput and running the function showEndDate the inputDate + 21 days is outputted to the console successfully but no maximum is being set on form field with ID end_date.
What is incorrect with my use of setAttribute("max", inputDate). ?
I have tested entering a fixed value such as setAttribute("max", '2021-10-31') and this works 31st Oct does get set correctly as the upper max value in the date field ! :( :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>
also end date:
<input id="end_date" type="date" name="holiday_end_date" >
inputDate is a Date, but attribute values are strings. So the date is being converted to string using the default toString method, which doesn't provide the date in the format expected of the max attribute.
You'll need to format it explicitly. There are lots of ways to do it, one of which (if you want the date in UTC [and yes, it matters even just for dates without times]) is inputDate.toString().substring(0, 10). But again, that'll be in UTC. If you want local time, you'll have to format it another way. There are lots of examples of formatting dates here on SO (here for example) and on the web.