jQuery datepicker - End Date should not be less than Start Date & Date difference

Question

I referred to the following two pages to combine two features: - End date should not be less than satart date - The date difference (Reference pages: http://www.jquerybyexample.net/2012/01/end-date-should-not-be-greater-than.html and jquery datepicker + date diff calculation )

The code I created using two sources above:

$(document).ready(function(){
 var select=function(dateStr) {
      var d1 = $('#datepicker3').datepicker('getDate');
      var d2 = $('#datepicker4').datepicker('getDate');
      var diff = 0;
      if (d1 && d2) {
            diff = Math.floor((d2.getTime() - d1.getTime()) / 86400000); // ms per day
      }
      $('#calculated').val(diff);
}
 
 
    $("#datepicker3").datepicker({
             showMonthAfterYear: true,

        numberOfMonths: 2,
             minDate: 0,
         onSelect: function(selected) {
          $("#datepicker4").datepicker("option","minDate", selected)
        }
    });
    $("#datepicker4").datepicker({ 
     showMonthAfterYear: true,
         numberOfMonths: 2,
         onSelect: select,
         function(selected) {
           $("#datepicker3").datepicker("option","maxDate", selected)
        }
    });  
});

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/redmond/jquery-ui.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.js"></script>

<input type="text" id="datepicker3" placeholder="Start Date"> - <input type="text" id="datepicker4" placeholder="End Date"><br>
<input type="text" id="calculated">

The code above works in Chrome but not in Internet Explorer. I think there is something wrong with my code. Could you please check it?

Thank you very much.

score 1 · Accepted Answer · answered Jun 25 '15 at 03:49

You have a syntax issue in adding the onSelect property of the second date picker.

$(document).ready(function() {
  var select = function() {
    var d1 = $('#datepicker3').datepicker('getDate');
    var d2 = $('#datepicker4').datepicker('getDate');
    var diff = 0;
    if (d1 && d2) {
      diff = Math.floor((d2.getTime() - d1.getTime()) / 86400000); // ms per day
    }
    $('#calculated').val(diff);
  }


  $("#datepicker3").datepicker({
    showMonthAfterYear: true,

    numberOfMonths: 2,
    minDate: 0,
    onSelect: function(selected) {
      $("#datepicker4").datepicker("option", "minDate", selected);
      select();
    }
  });
  $("#datepicker4").datepicker({
    showMonthAfterYear: true,
    numberOfMonths: 2,
    onSelect: function(selected) { //you have a syntax issue here the select method has to be called inside the default handler
      $("#datepicker3").datepicker("option", "maxDate", selected)
      select();
    }
  });
});

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/redmond/jquery-ui.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.js"></script>

<input type="text" id="datepicker3" placeholder="Start Date">-
<input type="text" id="datepicker4" placeholder="End Date">
<br>
<input type="text" id="calculated">

Wow. So fast. Thank you very much. Your code works well in Chrome. Now the datepicker works in IE 11 but the feature that the second date should be after the first date is disabled in IE (while no problem in Chrome.) Really thanks a lot for your help. — Peter, Jun 25 '15 at 03:59
@Peter Sorry... http://jsfiddle.net/arunpjohny/dmttgy7z/2/ - If I select a date in first dp, then all dates before that is disabled in second dp in IE11... is that the case you are testing — Arun P Johny, Jun 25 '15 at 04:01
Now it seems everything is okay. Really thanks for your help! — Peter, Jun 25 '15 at 04:06
Hi@Arun P Johny, based on this post, I want to make an updated version, just using jquery month picker, but then it doesn't work, could you please take a look at this post if interested, thanks in advance.http://stackoverflow.com/questions/33411152/django-jquery-month-picker-the-to-date-not-always-updated-as-later-than-from — Héléna, Oct 30 '15 at 04:12

score 1 · Answer 2 · edited Nov 16 '17 at 05:28

1

start date and greater than end date

$(document).on('change', '#startdate', function () {
    var startdate = $(this).val();
    var endDate = $('#endDate').datepicker({
        format: 'dd/mm/yyyy',
        autoclose: true,
        endDate: '+0d',
        autoclose: true
    });
    endDate.datepicker("setStartDate", startdate);
});

edited Nov 16 '17 at 05:28

Pang

9,564
146
81
122

answered Nov 16 '17 at 05:09

Jasim Juwel

736
8
19

score 1 · Answer 3 · edited Aug 05 '22 at 15:46

1

Here is the actual answer my dear friends. use onselect

$('#todate').datepicker({
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        dateFormat: "d-MM-yy",

        onSelect: function date() {
            var startDate = new Date($('#date1').val());
            var endDate = new Date($('#date2').val());

            if (startDate > endDate) {
                alert("EndDate must be greater than start date");
                $('#date2').val('');
            }
        }
    });

edited Aug 05 '22 at 15:46

Alex Coetzee

111
9

answered Aug 18 '18 at 20:34

Ranjith Reddy

11
1

Is this code complete? Is `datepicker()` finished? – wibeasley Aug 18 '18 at 20:58
This should be voted as correct answer. – Alex Coetzee Aug 04 '22 at 11:06

jQuery datepicker - End Date should not be less than Start Date & Date difference

3 Answers3