jQuery datepicker - 结束日期不应小于开始日期和日期差

Question

我参考了以下两页来结合两个特征： - 结束日期不应小于开始日期 - 日期差异（参考页面： http://www.jquerybyexample.net/2012/01/end-date-should-not-be-greater-than.html 和 jquery datepicker + date diff calculation )

我使用上面两个来源创建的代码：

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

以上代码在 Chrome 中有效，但在 Internet Explorer 中无效。我认为我的代码有问题。你能检查一下吗？

非常感谢。

Answer 1

您在添加第二个日期选择器的 onSelect 属性时遇到语法问题。

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

Answer 2

开始日期大于结束日期

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

Answer 3

亲爱的朋友们，这里是真实的答案。使用 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('');
        }

    }

jQuery datepicker - 结束日期不应小于开始日期和日期差

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

jquery

datepicker