How can I validate two date fields against each other and current day?

Question

I am trying to validate an HTML form field:

1. The start date must be before the end date

2. Both dates must be not in the past.

Here is my form inputs:

$(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>

I use type Date, so not sure if I need to replace / before comparing. Also I am not sure how I would be able to check if the dates are in the past.

Answer 1

You can use momentjs library, this library is popular for handle date time.

In your code, you need set $('#message').html(''); in case valid

$(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

You are trying to compare the input's values directly in your condition. These values are Strings and as string they get compared lexographical. To compare the values as Dates you have to simply create a new Date Object from the inputs value String and compare those:

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

To take it a step further, you could reset the inputs value to null if the condition returns true, that way your input has no value, and since it has the required Attribute, the additional check in your submit gets redundant and can be deleted.

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

Side note:

I would rather use the change event instead of the keyup event, to validate your input. You have alot of unnessecary runs and probably even errors when you use the keyupevent and check before a valid date string is entered.