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 — Jaydeep
– Jaydeep, Commented Jan 22, 2020 at 6:30

Pedram · Accepted Answer · 2020-01-22 08:59:47Z

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>

edited Jan 22, 2020 at 8:59

answered Jan 22, 2020 at 6:41

Pedram

16.7k10 gold badges47 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Kamran Hassan Over a year ago

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

Pedram Over a year ago

Glad to help @KamranHassan

Kamran Hassan Over a year ago

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

Pedram Over a year ago

@KamranHassan It's better to create a new question, but wait.. tell me here, maybe it's tiny, can solve it here

Kamran Hassan Over a year ago

i dont know if it's tiny or not but edited my question maybe it can help you what i want to have

|

Pedram · Accepted Answer · 2020-01-22 09:37:11Z

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, 2020 at 9:37

Pedram

16.7k10 gold badges47 silver badges73 bronze badges

answered Jan 22, 2020 at 6:30

Ravi

3242 silver badges10 bronze badges

Comments

Lokesh Suman · Accepted Answer · 2020-01-22 06:54:46Z

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, 2020 at 6:54

answered Jan 22, 2020 at 6:40

Lokesh Suman

5035 silver badges16 bronze badges

1 Comment

Kamran Hassan Over a year ago

my date format is 24/01/2020 can you tweak it on my code so i can better understand

Collectives™ on Stack Overflow

Comparing two custom format dates jquery

3 Answers 3

7 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related