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

Question

我参考了以下两个页面来组合两个功能：-结束日期不应小于起始日期-日期差异（参考页面：http://www.jquerybyexample.net/2012/01/end-date-should-not-be-greater-than.html和jquery日期选择器+日期差异计算）

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

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

这是我亲爱的朋友们的实际答案。使用选择

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