Question

不知怎的，我无法让它发挥作用。对我来说似乎是正确的，当我调试代码时，我的值正确传递。然而，代码仍未进入“警报”对话框

<input id="date1" type="text" class="form-control"
       placeholder="date 1" data-date-format="dd/mm/yyyy">

<input id="date2" type="text" class="form-control"
       placeholder="date 2" data-date-format="dd/mm/yyyy"
       onchange="checkDate()">

function checkDate() {
    var d1 = document.getElementById("date1").value;
    var d2 = document.getElementById("date2").value;
    if (d2 >= d1) {
        alert("date 2 is not allowed to be smaller than date 1")
    } else {
        //Success
    }
}

Answer 1

你正在比较字符串。

尝试将输入转换为date对象，如下所示：

d1 = new Date(document.getElementById("date1").value);

html5中还有一个新的输入类型：“date”
我建议将其用于输入标签。

示例：

<input type="date" id="date1" date-format="dd/mm/yyyy" onchange="checkDate()"/>

Answer 2

这是HTML5日期字段的正确示例。我还将变量重命名为开始日期和结束日期，以便更容易理解。

＆＃13;

function checkDate() {
  var dateForm  = document.forms['date-form'];
  var startDate = new Date(dateForm['start-date'].value);
  var endDate   = new Date(dateForm['end-date'].value);

  if (startDate >= endDate) {
    alert("End Date cannot occur before the Start Date!");
  } else {
    alert("Success!");
  }
}

＆＃13;

.form-field {
  display: block;
  font-weight: bold;
}
.form-field label {
  display: inline-block;
  width: 5em;
}
.form-field label:after {
  content: ': ';
}

＆＃13;

<form name="date-form">
  <div class="form-field">
    <label>Start Date</label>
    <input id="date1" type="date" class="form-control" name="start-date"
           format="dd/mm/yyyy" data-date-format="dd/mm/yyyy" />
  </div>
  <div class="form-field">
    <label>End Date</label>
    <input id="date2" type="date" class="form-control" name="end-date"
           format="dd/mm/yyyy" data-date-format="dd/mm/yyyy" />
           <!-- onchange="checkDate()" -->
  </div>
  <input type="button" value="Check" onClick="checkDate()" />
</form>

＆＃13;

Answer 3

使用Date课程来比较日期：

function checkDate() {
  var d1 = new Date(document.getElementById("date1").value);
  var d2 = new Date(document.getElementById("date2").value);

  if (d2.getTime() >= d1.getTime()) {
    alert("date 2 is not allowed to be smaller than date 1")
  } else {
    alert('//Success');
  }
}

<input id="date1" type="text" class="form-control" placeholder="date 1" data-date-format="dd/mm/yyyy">

<input id="date2" type="text" class="form-control" onchange="checkDate()" placeholder="date 2" data-date-format="dd/mm/yyyy">

Answer 4

首先，这样做：

function myStringToDate(str) {
  var arr  = str.split("/"); // split string at slashes to make an array
  var yyyy = arr[2] - 0; // subtraction converts a string to a number
  var jsmm = arr[1] - 1; // subtract 1 because stupid JavaScript month numbering
  var dd   = arr[0] - 0; // subtraction converts a string to a number 
  return new Date(yyyy, jsmm, dd); // this gets you your date
}

然后您将拥有此工作所需的工具：

function checkDate() {
    var d1 = myStringToDate(document.getElementById("date1").value);
    var d2 = myStringToDate(document.getElementById("date2").value);
    if (d2.getTime() <= d1.getTime()) {
        alert("date 2 is not allowed to be smaller than date 1")
    } else {
        //Success
    }
}

请注意，我将比较运算符从>=更改为<=，因为<=似乎更符合您的意图。如果我错了，那就改回来吧。

比较表单中的两个日期

4 个答案: