如何检查DateTime-Local输入字段不小于其他DateTime-Local字段

Question

我正在创建一个表单，其中我使用的是2个输入字段的 datetime-local- startdate和enddate。

我如何确保终点不小于起点。我在下面写了下面的JS，但它并没有在页面的提交按钮上选择日期/什至on Click。

请告知，感谢您抽出宝贵的时间阅读：）

function checkDate() {
  var dateString = document.getElementById('StartDate').value;
  var dateString2 = document.getElementById('EndDate').value;
  var DateStart = new Date(dateString);
  var DateEnd = new Date(dateString2);
  if (DateEnd > DateStart) {
    alert("End date cannot be less than Start date.");
    return false;
  }
  return true;
}

<input type="datetime-local" class="form-control name_list" name="StartDate" id="StartDate" required="required" onclick="checkDate()" />
</div>
<div class="col-lg-1 mb-0">
  <h6>Deployment End *</h6>
</div>
<div class="col-lg-3 mb-0">
  <input type="datetime-local" class="form-control name_list" name="EndDate" id="EndDate" required="required" onclick="checkDate()" />
</div>

Answer 1

使用单击事件处理程序只有在单击表单时会激活，当您没有任何有用的信息时发射。替代方案是" on Change"，当您完成输入时会发射。

<input type="datetime-local" class="form-control name_list" name="StartDate" id="StartDate" required="required" onchange="checkDate()" />
<input type="datetime-local" class="form-control name_list" name="EndDate" id="EndDate" required="required" onchange="checkDate()" />

如果要确保与开始日期相比，您需要交换比较操作员。

if (DateEnd < DateStart) {
    alert("End date cannot be less than Start date.");
    return false;
}
  return true;