Question

我试图从jQuery创建一个日期选择器。

用户将允许从2016年至2020年每年仅选择6月至9月。（所以我不认为minDate和maxDate会在这里工作）

我尝试使用＆＃34; beforeShowDay＆＃34;如提到的那样 Disable specific months JqueryUI datepicker

该代码成功禁止用户从6月到9月之外选择日期，但他们仍然可以从月份下拉列表（datepicker）中选择1月至12月。

我想要做的是将datepicker month-drop-down-list限制为仅显示6月到9月。

$(document).ready(function() {


           $("#datepicker").datepicker({
           changeMonth: true,
           changeYear: true,
           yearRange:'2016:2020',
           minDate:0,
           beforeShowDay: disableSpecificWeekDays

        });     


        var monthsToDisable = [0,1,2,3,4,9,10,11];
        var endMonth=[8];
        function disableSpecificWeekDays(date) {
            var month = date.getMonth();


            if ($.inArray(month, monthsToDisable) !== -1) {
                return [false];
            }
            return [true];
        }
        $("#datepicker").datepicker("setDate",'06/01/2016');
    });

Answer 1

嗯，基督的代码会在您选择某个月/日后激活自己。如果你不这样做，1月，2月......仍然会出现。

因此我添加“beforeShow：”并将其连接到removeDisabledMonths（）; 现在效果更好。

$（ “＃日期选择器”）。日期选择器（{ changeMonth：是的， changeYear：true， yearRange： '2016 2020' 称，的minDate：0， beforeShowDay：disableSpecificWeekDays， onChangeMonthYear：function（year，month，obj）{ removeDisabledMonths（）; }

        });     


        var monthsToDisable = [0,1,2,3,4,9,10,11];



        function disableSpecificWeekDays(date) {
            var month = date.getMonth();
            var day=date.getDate();


            if ($.inArray(month, monthsToDisable) !== -1) {
                return [false];
            }
            return [true];
        }



        $("#datepicker").datepicker("setDate",'06/01/2016');er code here

Answer 2

$( ".selector" ).datepicker( "option", "defaultDate", "2019-09-01" );
$( ".selector" ).datepicker( "option", "minDate","2019-09-01");
$( ".selector" ).datepicker( "option", "maxDate","2019-09-30");

这仅显示日历中的9月，并阻止用户访问其他月份。

Answer 3

我没有看到任何允许您调整此选项的选项。我有一个hacky解决方案可能会在大多数用例中完成这项工作，但那是你的号召。我在这里做的是每次更新时从日期选择器列表中删除不需要的选择项。我不得不添加一个短暂的延迟，因为jQuery UI需要一秒钟才能生成代码。

var removeDisabledMonths = function() {
    setTimeout(function() {

        var monthsToDisable = [0,1,2,3,4,9,10,11];

        $.each(monthsToDisable, function(k, month) {
            var i = $('#ui-datepicker-div select.ui-datepicker-month').find('option[value="'+month+'"]').remove();
        });

    }, 100);
};

//datepicker
$("#datepicker").datepicker({
    changeMonth: true,
    changeYear: true,
    yearRange:'2016:2020',
    minDate:0,
    beforeShowDay: disableSpecificWeekDays,

    // Added this --
    onChangeMonthYear: function(year, month, obj) {
        removeDisabledMonths();
    }
}); 

//initial hide
setTimeout(function() {
    removeDisabledMonths();
}, 1000);

请注意，我必须在初始化datepicker后以1秒的延迟调用该函数，以便第一次隐藏月份。 Hacky，但如果您只是想为用户调整UI，那么它就可以完成这项工作。

允许datepicker仅显示特定月份

3 个答案: