允许日期选择器仅显示特定月份 [英] Allow datepicker to show only specific month

问题描述

我正在尝试从jQuery创建日期选择器.

I'm trying to crate a datepicker from jQuery.

从2016年至2020年，用户只能选择每年的6月至9月. (因此，我认为minDate和maxDate在这里不起作用)

Users will allow to choose only June to September in each year from 2016-2020. (So I don't think minDate and maxDate will work here)

我尝试使用"beforeShowDay"，如 禁用特定月份的JqueryUI datepicker

I tried using the "beforeShowDay" as mentioned in Disable specific months JqueryUI datepicker

该代码已成功禁止用户选择6月至9月之外的日期，但他们仍然可以从(日期选择器的)月份下拉列表中选择1月至12月.

The code was successfully disable users from picking the date outside from June to September but they can still choose January-December from the month dropdownlist (of datepicker).

我要做的是将datepicker的月下拉列表限制为仅显示6月到9月.

What I want to do is limit the datepicker month-drop-down-list to show only June to September.

$(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');
    }); 

推荐答案

我看不到任何允许您进行调整的选项.我有一个骇人的解决方案，可能会在大多数用例中做到这一点，但这就是您的要求.我在这里所做的是每次更新时都从datepicker列表中删除不需要的选择项.我不得不添加一个短暂的延迟，因为jQuery UI需要一秒钟来生成其代码.

I don't see any options that would allow you to adjust this. I have a hacky solution that will probably do the job for most use cases, but that's your call. What I have done here is remove the unwanted select items from the datepicker list each time it gets updated. I had to add a short delay as jQuery UI takes a second to generate its code.

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

请注意，在初始化日期选择器之后，我不得不在延迟1秒钟的时间内调用该函数，以使第一次隐藏的月份变多.哈克，但如果您只是想为用户调整用户界面，则可以完成此工作.

Note that I had to call the function with a 1 second delay after the datepicker was initialized in order to get the months to hide the first time. Hacky, but if you are only looking to adjust the UI for the user, it just may do the job.

这篇关于允许日期选择器仅显示特定月份的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！