HTML日期字段设置最大日期与JS

Question

当在ID为dateInput的表单字段中输入第一个日期并运行showEndDate函数时，inputDate + 21 days成功输出到控制台，但在ID为end_date的表单字段上没有设置最大值。与我的使用有什么不正确的?setAttribute("max", inputDate)。

?我已经测试了输入固定值，如setAttribute("max", '2021-10-31')，这工作31 Oct正确设置为日期字段中的最大值!: (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>

也是结束日期:

<input id="end_date" type="date" name="holiday_end_date" >

Answer 1

inputDate是Date，但属性值是字符串。因此，使用默认的toString方法将日期转换为字符串，该方法不以max属性所期望的格式提供日期。

你需要显式格式化它。有很多方法可以做到这一点，其中之一是(if你想要UTC的日期[是的，它甚至只对没有时间的日期很重要])是inputDate.toString().substring(0, 10)。但同样，那是在UTC。如果您想要本地时间，则必须以另一种方式格式化。地块关于日期格式的示例，请参阅SO(例如这里)和web。