根据从下拉列表中选择的选项禁用 jquery datepicker 中的日期答案

【问题标题】：Disable dates in jquery datepicker according to option selected from dropdown根据从下拉列表中选择的选项禁用 jquery datepicker 中的日期
【发布时间】：2013-03-28 18:21:16
【问题描述】：

我有两个日期选择器显示开始日期和结束日期。有一个带有选项的选择框：

|daily|
|weekly|
|monthly|
|yearly|

假设选择的选项是每周，并且在 startdate 中选择的日期是 2013-03-28 即；周四。然后我需要在结束日期中禁用除星期四以外的日历中的所有其他日期。同样，如果选择了月份并且开始日期为 2013-03-28，那么我想在结束日期中禁用除每月 28 日以外的所有日期。我怎样才能做到这一点。

脚本

 $( "#startdate" ).datepicker({
        showButtonPanel: true,
        dateFormat: 'yy-mm-dd',
        minDate: 0,
        changeYear: true,
        changeMonth: true,
        numberOfMonths: 1,
        onClose: function( selectedDate ) {
            $( "#enddate" ).datepicker( "option", "minDate", selectedDate );
        }
    });

 $( "#enddate" ).datepicker({
                showButtonPanel: true,
                dateFormat: 'yy-mm-dd',
                minDate: 0,
                changeYear: true,
                changeMonth: true,
                numberOfMonths: 1,
                onClose: function( selectedDate ) {
                    $( "#startdate" ).datepicker( "option", "maxDate", selectedDate );
                }
            });

【问题讨论】：

标签： jquery jquery-ui-datepicker

【解决方案1】：

你可以这样实现：

$(function() {
    var period = 'weekly';
    var filterDate = function(date) {
        var today = new Date();
        if (period == 'weekly') {
            if (today.getUTCDay() != date.getUTCDay()) {
                return [false, "", ""];                
            }
        } else if (period == 'monthly') {
            if (today.getDate() != date.getDate()) {
                return [false, "", ""];                
            }            
        }
        return [true,"",""];
    };

    $("#period").change(function() {
        period = $(this).val();
    });    
    ...
    $( "#enddate" ).datepicker({
        ...
        beforeShowDay: filterDate
    });
});

这里是现场演示：http://jsfiddle.net/netme/8GYsx/

【讨论】：