我正在使用 javascript 來獲取表單輸入欄位的值 getElementById("myTextInputID")
如何將日期增加 21 天（3 周）并將此新日期指定為 name 日期欄位中的最大值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>```
uj5u.com熱心網友回復：
該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 名稱！因為它會給你帶來問題，而且很容易找到兩個不同的名字
uj5u.com熱心網友回復：
您使用該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>或者，使用change系結到manufacture_one日期輸入欄位的事件偵聽器的替代方法，以便用戶無需單擊“單擊此處...”鏈接即可計算新日期。
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>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/337053.html
標籤：javascript php 形式