Comparing two custom format dates jquery

Question

I have tried to validate my dates if start date is less than end date it should alert but it only work with in same month, but when i compare dates of one month date to another month date it keeps stops me select less date even it is already.

here is what i have done so far,

$('#datepicker2').change(function () {
var startDate =  new Date($('#datepicker').val());
var endDate = new Date($('#datepicker2').val());
if (startDate < endDate){
alert("selected date is above pickup date, ");
}
});

here is my html

   <div class="col-md-4">
            <div class="row">
              <div class="col-md-6">
                <input type="text" id="datepicker" required name="pickupDate" placeholder="Pickup Date">
              </div>
              <div class="col-md-6">
                <input class="" id="datetimepicker4" autocomplete="off" required name="pickupTime" placeholder="Pickup Time">
              </div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="row ct-date-row">
              <div class="col-md-6">
                <input type="text" id="datepicker2" required name="dropDate" placeholder="Drop off Date">
              </div>
              <div class="col-md-6">
                <input class="" autocomplete="off" id="datetimepicker5"  required name="dropTime" placeholder="Drop Time">
              </div>
            </div>
          </div>

my date format is d/m/y if this is making issue then how could i possibly define formate within new date and compare them. Thanks

I want when same date it hides previous time on time drop down of jquery.

    $('#datetimepicker5').timepicker({
    timeFormat: 'HH:mm',
});
    $('#datetimepicker4').timepicker({
    timeFormat: 'HH:mm',
});

format of my time i am not being to get time which is selected,

     jQuery('document').ready(function(){

            jQuery('#datetimepicker5').on('change paste keyup', function() {
                var x = jQuery("#datetimepicker5").val();


                alert(x);
            });
        });

Answer 1

You can convert your both dates to seconds and then compare it. then it will work like charm:

i.e.

var date1 = new Date("2015-08-25T15:35:58.000Z");
var seconds1 = date1.getTime() / 1000; //1440516958

Answer 2

So, you are using jQuery Ui DatePicker, there is native way to get date with getDate, here you go:

---

For compare your dates if equal or same you need to use Date.parse() , you need to do this:

if (Date.parse(startDate) === Date.parse(endDate))

$(function() {
  $("#datepicker").datepicker({
    dateFormat: "d/m/y"
  });
  $("#datepicker2").datepicker({
    dateFormat: "d/m/y"
  });
  $('#datetimepicker5').timepicker({
    timeFormat: 'HH:mm',
  });
  $('#datetimepicker4').timepicker({
    timeFormat: 'HH:mm',
  });
});

$('#datepicker2').on('paste keyup change', function() {
  var startDate = $('#datepicker').datepicker("getDate");
  var endDate = $('#datepicker2').datepicker("getDate");
  if (startDate > endDate) {
    alert("selected date is above pickup date, ");
  } else if (Date.parse(startDate) === Date.parse(endDate)) {
    alert("same");
    var dt = new Date();
    var phours = dt.getHours() + 3;
    var time = phours + ":" + "00";
    alert(time);
    jQuery('#datetimepicker5').timepicker({
      minTime: time
    });
    jQuery('#datetimepicker4').timepicker({
      minTime: time
    });
    $('#datetimepicker4').val(time)
    $('#datetimepicker5').val(time)
  }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://www.jonthornton.com/jquery-timepicker/jquery.timepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha256-KM512VNnjElC30ehFwehXjx1YCHPiQkOPmqnrWtpccM=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" integrity="sha256-rByPlHULObEjJ6XQxW/flG2r+22R5dKiAoef+aXWfik=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.10.0/jquery.timepicker.min.css" integrity="sha256-zV9aQFg2u+n7xs0FTQEhY0zGHSFlwgIu7pivQiwJ38E=" crossorigin="anonymous" />

<div class="col-md-4">
  <div class="row">
    <div class="col-md-6">
      <input type="text" id="datepicker" required name="pickupDate" placeholder="Pickup Date">
    </div>
    <div class="col-md-6">
      <input class="" id="datetimepicker4" autocomplete="off" required name="pickupTime" placeholder="Pickup Time">
    </div>
  </div>
</div>
<div class="col-md-4">
  <div class="row ct-date-row">
    <div class="col-md-6">
      <input type="text" id="datepicker2" required name="dropDate" placeholder="Drop off Date">
    </div>
    <div class="col-md-6">
      <input class="" autocomplete="off" id="datetimepicker5" required name="dropTime" placeholder="Drop Time">
    </div>
  </div>
</div>

Answer 3

Use Date.parse()

The Date.parse() method parses a string representation of a date and returns the number of milliseconds since January 1, 1970, 00:00:00 UTC

$('#datepicker2').change(function () {
    var startDate =  new Date($('#datepicker').val());
    var endDate = new Date($('#datepicker2').val());
    if (Date.parse(startDate) < Date.parse(endDate)){
        alert("selected date is above pickup date, ");
    }
});