如何根据 jquery datepicker 中的某些 datepicker 值禁用未来日期答案

【问题标题】：how to disable future dates based on some datepicker value in jquery datepicker如何根据 jquery datepicker 中的某些 datepicker 值禁用未来日期
【发布时间】：2013-12-26 09:42:32
【问题描述】：

我正在使用 jquery datepicker，我有 4 个日期：start_date、end_date、publishing_date 和 leave_date。这里基于 start_date 我想禁用到 start_date 的未来日期，同样基于 end_date 我想从结束日期禁用过去的日期。我不能这样做，尝试了许多选项，如 onSelect，但我无法获得所需的禁用。这是我的 jquery 代码。

var dateToday = new Date();
var dates = $("#start_date, #end_date").datepicker({
    dateFormat: 'yy-mm-dd',
    minDate: dateToday,
    onSelect: function(selectedDate) {
        var option = this.id == "start_date" ? "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);
    }
});

$('#departure_date').datepicker({
    dateFormat: 'yy-mm-dd',
    minDate: $('#end_date').datepicker({
        dateFormat: 'dd-mm-yy'
    }).val()
});

$('#publishing_date').datepicker({
    dateFormat: 'yy-mm-dd',
    maxDate: $('#start_date').datepicker({
        dateFormat: 'dd-mm-yy'
    }).val()
});

欢迎任何建议/帮助。提前致谢。

也尝试如下使用，但无济于事。

$('#publishing_date').datepicker({
    dateFormat: 'yy-mm-dd',
    maxDate : ($.datepicker.formatDate('yy-mm-dd', $('#start_date').datepicker("getDate")))
});

【问题讨论】：

标签： javascript jquery jquery-ui datepicker

【解决方案1】：

根据@Mahesh Sapkal 的建议，我对我的代码进行了以下更改。

var dateToday = new Date();
var dates = $("#start_date, #end_date").datepicker({
    dateFormat: 'yy-mm-dd',
    minDate: dateToday,
    onSelect: function(selectedDate) {
          var option = this.id == "start_date" ? "minDate" : "maxDate",
          instance = $(this).data("datepicker"),
          date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
          if(this.id == "start_date"){
                   $("#publishing_date").datepicker({
                         dateFormat: 'yy-mm-dd',
                         minDate: dateToday,
                         maxDate: date
                    });
          }
          if(this.id == 'end_date'){
                   $("#departure_date").datepicker({
                         dateFormat: 'yy-mm-dd',
                         minDate: date
                   })
          }
          dates.not(this).datepicker("option", option, date);
     }

}); 不知道为什么，但他的建议 $( "#departure_date" ).datepicker( "option", "minDate",date ); 不适合我。

【讨论】：

【解决方案2】：

试试这个

 $("#start_date").datepicker({
dateFormat: 'dd-mm-yy',
minDate: "+0D",
onSelect: function (selectedDate) {
    var d = parseInt(selectedDate.substring(0, 2));
    var m = parseInt(selectedDate.substring(3, 5));
    var y = parseInt(selectedDate.substring(6, 10));
    var newDate = new Date(y, m - 1, d + 1);
    $("#departure_date").datepicker("option", "minDate", newDate);
}
});

$("#departure_date").datepicker({
dateFormat: 'dd-mm-yy',
minDate: "+0D",
onSelect: function (selectedDate) {
    var d = parseInt(selectedDate.substring(0, 2));
    var m = parseInt(selectedDate.substring(3, 5));
    var y = parseInt(selectedDate.substring(6, 10));
    var newDate = new Date(y, m - 1, d + 1);
    $("#publishing_date").datepicker("option", "minDate", newDate);
   }
 });

【讨论】：

end_date 怎么样。它应该取决于 start_date。我该怎么做。
在开始日期中选择写入 $("#end_date").datepicker("option", "minDate", newDate);

【解决方案3】：

初始化后需要设置departure_date和publishing_date。

试试这个。

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

        if(this.id === "end_date") {
            $( "#departure_date" ).datepicker( "option", "minDate",date );
        } else {
            $( "#publishing_date" ).datepicker( "option", "maxDate",date );
        }

    }

【讨论】：

【解决方案4】：

使用beforeShowDay 选项来执行此操作。

【讨论】：