1

在报告中，我显示 startDate 和 endDate 字段以使用 jQuery ui datepicker 选择特定日期。对于 startDate 和 endDate 字段，我将今天日期作为默认日期。我的要求是

1）如果客户直接点击endDate，则应禁用今天日期之前和今天日期之后的日期。

2) 如果客户为 startdate 选择任何特定日期，那么对于 enddate，应禁用所选日期之前和之后的日期。

我正在使用下面的代码。

var dates = $( "#startDate, #endDate" ).datepicker({
    defaultDate: "+1w",
    dateFormat : 'dd-mm-yy',
    changeMonth: true,
    numberOfMonths: 1,
    changeMonth: true,
    changeYear : true,
    numberOfMonths: 1,
    maxDate: 0,

    onSelect: function( selectedDate ) {
        var option = this.id == "startDate" ? "minDate" : "maxDate",
        instance = $( this ).data( "datepicker" ),
        date = $.datepicker.parseDate(
            instance.settings.dateFormat ||
            $.datepicker._defaults.dateFormat,
            selectedDate, instance.settings );
        dates.not( this ).datepicker( "option", option, date );
      }
  });

如果我使用它，我可以满足第二个要求，但不能满足第一个要求。但我需要同时实现这两个条件。

我怎样才能做到这一点？

4

1 回答 1

1

尝试以下操作，您需要在选择开始日期和结束日期时调用一个函数来设置最小日期和最大日期。

在这里演示

// To set mindate in enddate
function customRange(input) 
{ 
return {
        minDate: (input.id == "end_date" ? $("#start_date").datepicker("getDate") : new Date())
      }; 
}

// To set maxdate in startdate
function customRangeStart(input) 
{ 
return {
        maxDate:(input.id == "start_date" ? $("#end_date").datepicker("getDate") : null)
      }; 
}

$(document).ready(function() {

   $('#start_date').datepicker(
   {
       beforeShow: customRangeStart,
       minDate: 0,
       dateFormat: "yy-mm-dd",
       changeYear: true
   });

   $('#end_date').datepicker(
   {
       beforeShow: customRange,
       dateFormat: "yy-mm-dd",
       changeYear: true
   });
});
于 2013-09-30T10:51:08.940 回答