增加日期并在日期字段中指定为最大值

Question

我正在使用 javascript 来获取带有 getElementById("myTextInputID") 的表单输入字段的值

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

我对@9​​87654323@ 和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 属性必须是唯一的，并且在大多数情况下并不是真正需要的，因为可以通过其他方式（例如 querySelector）来识别 DOM 元素。同样值得注意的是，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>