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

时间:2015-06-25 03:41:27

标签: jquery datepicker

我提到以下两页结合两个功能: - 结束日期不应低于satart日期 - 日期差异 (参考页: http://www.jquerybyexample.net/2012/01/end-date-should-not-be-greater-than.htmljquery datepicker + date diff calculation

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



web:
  build: .
  ports:
   - "5000:5000"
  volumes:
   - .:/code
  links:
   - redis
redis:
  image: redis

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




上述代码适用于Chrome,但不适用于Internet Explorer。我认为我的代码有问题。你能检查一下吗?

非常感谢。

3 个答案:

答案 0 :(得分:0)

添加第二个日期选择器的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">

答案 1 :(得分:0)

开始日期和大于结束日期

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

答案 2 :(得分:0)

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

    }