如何从 html/javascript 中先前表单的数据中禁用日期

Question

所以在第一个表单上，我想禁用日期，即今天后 7 天，它成功了 但是在第二个表单上，我想禁用日期，在 date_in 表单填写后 7 天，但它不起作用。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
//date_in or first form

<div class="form-group">
  <label for="date_in">Date In</label>
  <input class="form-control" type="date" id="date_in" name="date_in" required>
</div>

//date_out or second form

<div class="form-group">
  <label for="date_out">Date Out</label>
  <input type="date" class="form-control" id="date_out" name="date_out">
</div>


<script>
  //date_in disable javascript
  var dt = new Date();
  dt.setDate(dt.getDate() + 8);
  var dayaf = dt.toISOString().split('T')[0];

  document.getElementsByName("date_in")[0].setAttribute('min', dayaf);


  //date_out disable javascript

  var de = $('#date_in').val();
  de.setDate(de.getDate() + 8);
  var dayen = de.toISOString().split('T')[0];


  document.getElementsByName("date_out")[0].setAttribute('min', dayen);
</script>

Answer 1

你已经完成了第一部分。第二部分略有不同。它应该随着用户选择不同的“日期”值而动态变化。所以，替换如下：

//date_out disable javascript
var de = $('#tanggal_mulai').val();
de.setDate(de.getDate() + 8);
var dayen = de.toISOString().split('T')[0];
document.getElementsByName("date_out")[0].setAttribute('min', dayen);

类似这样的：

$("#date_in").change(function(e) {
    var de = new Date($('#date_in').val());  // I guess tanggal_mulai is a typo or something
    de.setDate(de.getDate() + 8);
    var dayen = de.toISOString().split('T')[0];
    document.getElementsByName("date_out")[0].setAttribute('min', dayen);
});

您使用了 jQuery $() 和 vanilla JS (document.getElementByName) 样式来检索对象。我没有碰这些，但强烈建议保持一致。