增加日期并在日期字段中赋值为max

Question

我使用javascript获取表单输入字段的值与getElementById("myTextInputID")

如何将日期增加21天(3周)，并在名称为end_date的日期字段中将此新日期指定为最大值?

我对new Date()和addDays(21)的尝试对我不起作用。

<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>```

Answer 1

addDays方法不存在． 您需要使用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 >

总之您可以将inputValue.addDays(21);行替换为inputValue.setDate(inputValue.getDate() + 21);

但是要避免在同一个方法中两次使用相同的var名!因为它会给你带来问题，而且很容易找到两个不同的名字

Answer 2

您可以使用setDate方法将所需的天数添加到现有日期对象中，并且为了简单地输出到end_date字段而不是简单地使用value，您可以使用valueAsDate，如下所示。

顺便说一句，ID属性必须是唯一的，在大多数情况下并不是真正需要的，因为DOM元素的识别可以通过其他方式完成，比如querySelector。同样值得注意的是，inline事件处理程序的使用现在并不被认为是最佳实践——外部注册的事件处理程序要干净得多。

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>

或者，使用绑定到manufacture_one日期输入字段的change事件侦听器的替代方案，这样用户就不需要单击"点击这里…"计算新日期的链接。

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>