Как я могу проверить два поля даты относительно друг друга и текущего дня?

Question

Я пытаюсь проверить поле формы HTML:

1. Дата начала должна быть раньше даты окончания

2. Обе даты не должно быть в прошлом.

Вот мои входные данные для формы:

$(document).ready(function() {
  var dateIsBefore = false;
  var dateInPast = false;

  $('#end_date').on('keyup', function() {
    if ($('#start_date').val() < $('#end_date').val()) {
      dateIsBefore = true;
    } else {
      $('#message').html('Start date must not be after end date').css('color', 'red');
      dateIsBefore = false;
    }
  });

  $('#submitRequest').click(function(e) {
    if (!dateIsBefore) {
      e.preventDefault();
    }
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<input class="form-control" id="start_date" name="start_date" placeholder="DD/MM/YYYY" required="required" />

<input class="form-control" id="end_date" name="end_date" placeholder="DD/MM/YYYY" required="required" />
<br/>
<button type="submit" id="submitRequest" class="btn btn-primary">Submit Request</button> <span id='message'></span>

Я использую тип Date, поэтому не уверен, нужно ли мне заменить / перед сравнением. Также я не уверен, как я смогу проверить, были ли даты в прошлом.

Answer 1

Вы можете использовать библиотеку momentjs, эта библиотека популярна для обработки даты и времени.

В вашем коде вам нужно set $('#message').html(''); в случае допустимости

$(document).ready(function() {
  var dateIsBefore = false;
  var dateInPast = false;

  $('#end_date').on('keyup', function() {
    var start_date = moment($('#start_date').val(), "DD/MM/YYYY");
    var end_date = moment($('#end_date').val(), "DD/MM/YYYY");
   
    if ( start_date < end_date) {
      dateIsBefore = true;
      $('#message').html('');
    } else {
      $('#message').html('Start date must not be after end date').css('color', 'red');
      dateIsBefore = false;
    }
  });

  $('#submitRequest').click(function(e) {
    if (!dateIsBefore) {
      e.preventDefault();
    }
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.26.0/moment.min.js" integrity="sha256-5oApc/wMda1ntIEK4qoWJ4YItnV4fBHMwywunj8gPqc=" crossorigin="anonymous"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<input class="form-control" id="start_date" name="start_date" placeholder="DD/MM/YYYY" required="required" />

<input class="form-control" id="end_date" name="end_date" placeholder="DD/MM/YYYY" required="required" />
<br/>
<button type="submit" id="submitRequest" class="btn btn-primary">Submit Request</button> <span id='message'></span>

Answer 2

Вы пытаетесь сравнить входные значения непосредственно в вашем условии. Эти значения являются строками, и они сравниваются как строка лексографическая . Чтобы сравнить значения как даты, вам нужно просто создать новый объект даты из входного значения String и сравнить его:

 if(new Date($('#start_date').val()) > new Date($('#end_date').val())) {
    alert('End has to be after start');
 }

Чтобы сделать еще один шаг, вы можете сбросить значение входов на null если условие возвращает true, таким образом, ваш ввод не имеет значения, а поскольку он имеет атрибут required, дополнительная проверка в вашем отправлении становится избыточной и может быть удалена.

 if(new Date($('#start_date').val()) > new Date($('#end_date').val())) {
    alert('End has to be after start');
    $(this).val(null);
 }

Боковое примечание:

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