Сравните значения даты "мгновенно" при вводе пользователем

Question

Этот вопрос может быть похож на этот другой вопрос:

HTML Сравнение 2-х дат с Javascript

Но я не хочу использовать button,просто сделайте это мгновенно.

У меня есть 2 входа типа date, и я хочу сравнить между ними.

<div>
  <label style="font-family: 'Segoe UI';">Select a date.</label>
  <br><br>
  <span style="font-family: 'Segoe UI';">Since</span>&nbsp;
  <input type="date" name="since"  id="since" required="required" style="font-family: 'Segoe UI';"/>&nbsp;&nbsp;

  <span style="font-family: 'Segoe UI';">Until</span>&nbsp;
  <input type="date" name="until" id="until" required="required" style="font-family: 'Segoe UI';"/>
  <br><br>
  <button style="font-size: 14px; font-family: 'Segoe UI';" onclick="Validate()">COMPARE THIS</button>
</div>

<script type="text/javascript">
  function Validate(){
    var date1 = new Date(document.getElementById('since').value);
    var date2 = new Date(document.getElementById('until').value);
  
    if(date2 < date1) {

        alert('The date cannot be less than the first date that you selected');
        return false;

    }else{
        alert("It's OK");
        return true;
    }
  }
</script>

Теперь условие работает отлично, сравнивает 2 даты и выдает ошибку, если 2-я дата меньше первой.Но при этом используется кнопка для запуска сравнения.

Можно ли сравнить введенные даты без кнопки для запуска сравнения? И с использованием метода HTMLSelectElement.setCustomValidity()?

Answer 1

Вы должны быть осторожны с тем, какое событие вы используете с <input type="date">, чтобы избежать непредвиденных последствий.События input и change могут сработать, как только пользователь введет любую цифру в последнем пустом разделе даты (не обязательно одинаково для всех браузеров из-за нечеткой поддержки <input type="date">).

ДляНапример (в Chrome), если пользователь вводит «12» в качестве месяца, «31» в качестве даты, а затем вводит «2» в году (с намерением ввести «2018»), input иchange события сработают, как только будет введено «2», и в вашем сценарии функция проверки затем сравнит «31.12.2000» с другой датой, прежде чем пользователь закончит вводить год (и это будет происходить многократно, так какпользователь пытается ввести оставшиеся цифры года).Вы можете обойти это изящно в зависимости от того, как вы уведомите пользователя о результатах проверки, но это будет не очень красиво, если вы используете alert().

. По этой причине может быть безопаснее использоватьсобытие, подобное blur, для запуска сравнения проверки.Что-то вроде:

const since = document.querySelector('#since');
const until = document.querySelector('#until');
const message = document.querySelector('#message');

const compareDates = () => {
  let sval = since.value;
  let uval = until.value;
  if (sval && uval && (uval < sval)) {
    message.innerHTML = 'The "Until" date must come after the "Since" date.';
  } else {
    message.innerHTML = '';
  }
}

since.addEventListener('blur', compareDates);
until.addEventListener('blur', compareDates);

#message {
  margin: 8px 0;
  color: red;
}

<label for="since">Since</label>
<input type="date" name="since" id="since" required>
<label for="until">Until</label>
<input type="date" name="until" id="until" required>
<div id="message"></div>

Answer 2

Я думаю, вы можете использовать событие onchange для этого.Я немного изменил ваш фрагмент и поместил в простое условие, когда НЕ нужно проверять.Вы можете настроить его, чтобы быть более сложным.

<div>
  <label style="font-family: 'Segoe UI';">Select a date.</label>
  <br><br>
  <span style="font-family: 'Segoe UI';">Since</span>&nbsp;
  <input onchange="Validate()" type="date" name="since"  id="since" required="required" style="font-family: 'Segoe UI';"/>&nbsp;&nbsp;

  <span style="font-family: 'Segoe UI';">Until</span>&nbsp;
  <input onchange="Validate()" type="date" name="until" id="until" required="required" style="font-family: 'Segoe UI';"/>
</div>

<script type="text/javascript">
  function Validate(){
    var input1 = document.getElementById('since').value;
    var input2 = document.getElementById('until').value;
  if(input1 != "" && input2 != ""){
      var date1 = new Date(input1);
      var date2 = new Date(input2);

      if(date2 < date1) {

          alert('The date cannot be less than the first date that you selected');
          return false;

      }else{
          alert("It's OK");
          return true;
      }
    }
  }
</script>