Question

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

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

2）如果客户选择startdate的任何特定日期，则应该禁用所选日期之前的日期和截止日期之后的日期。

我正在使用以下代码。

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

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

我该怎么做？

Answer 1

尝试以下操作，您需要调用一个功能来设置最小日期和最长日期，同时选择开始日期和结束日期。

DEMO HERE

// 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
   });
});

禁用所选日期之前和今天日期之后的日期

1 个答案: