Почему-то я не могу заставить это работать. Мне это кажется правильным, и когда я отлаживаю код, мои значения передаются правильно. Тем не менее, код по-прежнему не входит в диалоговое окно «Предупреждение»

<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
    }
}
0
MishMish 13 Дек 2016 в 15:57

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
    }
}

Обратите внимание, что я изменил оператор сравнения с >= на <=, потому что казалось, что <= лучше соответствует вашим намерениям. Если я был неправ по этому поводу, просто верните его обратно.

1
Robert Lozyniak 13 Дек 2016 в 13:48

Вы сравниваете строки.

Попробуйте преобразовать входные данные в объект, как показано ниже:

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

Также есть новый тип ввода в html5: «дата»
Я рекомендую использовать это в качестве входного тега.

Пример:

<input type="date" id="date1" date-format="dd/mm/yyyy" onchange="checkDate()"/>
2
iHasCodeForU 13 Дек 2016 в 13:09

Вот правильный пример поля даты в HTML5. Я также переименовал ваши переменные в дату начала и окончания, чтобы было легче следить за ними.

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!");
  }
}
.form-field {
  display: block;
  font-weight: bold;
}
.form-field label {
  display: inline-block;
  width: 5em;
}
.form-field label:after {
  content: ': ';
}
<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>
2
Mr. Polywhirl 13 Дек 2016 в 13:22

Используйте 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">
1
Justinas 13 Дек 2016 в 13:02