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

Does this answer your question? [Compare two dates with JavaScript](https://stackoverflow.com/questions/492994/compare-two-dates-with-javascript) — Jaydeep, Jan 22 '20 at 06:30
check my answer it will surely help you put your date value to date object and get the seconds and compare it. — Ravi, Jan 22 '20 at 06:35
@ravi i used your way still only working if dates are selected in same month date format is issue i think, my format is 24/01/2020 — Kamran Hassan, Jan 22 '20 at 06:39

Pedram · Accepted Answer · 2020-01-22T08:59:47.897

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>

It worked like an charm it was issue of date format so using jquery ui way it makes it easy to detect day directly since i was comparing whole date before. Thanks alot — Kamran Hassan, Jan 22 '20 at 07:09
I have one last question relate to min time set on jquery timepicker, should i edit current question post another or what. Sorry if i am asking alot. Thanks again btw — Kamran Hassan, Jan 22 '20 at 07:13
@KamranHassan It's better to create a new question, but wait.. tell me here, maybe it's tiny, can solve it here — Pedram, Jan 22 '20 at 07:15
i dont know if it's tiny or not but edited my question maybe it can help you what i want to have — Kamran Hassan, Jan 22 '20 at 07:20
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/206412/discussion-between-kamran-hassan-and-pedram). — Kamran Hassan, Jan 22 '20 at 07:21

score 1 · Answer 2 · edited Jan 22 '20 at 09:37

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

edited Jan 22 '20 at 09:37

Pedram

15,766
10
44
73

answered Jan 22 '20 at 06:30

Ravi

324
2
10

Lokesh Suman · Answer 3 · 2020-01-22T06:54:46.910

0

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, ");
    }
});

edited Jan 22 '20 at 06:54

answered Jan 22 '20 at 06:40

Lokesh Suman

493
5
14

my date format is 24/01/2020 can you tweak it on my code so i can better understand – Kamran Hassan Jan 22 '20 at 06:41

Comparing two custom format dates jquery

3 Answers3