Question

我正在使用jQuery月份和年份选择器（我隐藏了datepicker的日期部分）。

在这个日历中，我只需要在月份选择中显示1月，3月，4月和9月。有没有内置的方法呢？

$('.datepicker_month_year').datepicker({
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    dateFormat: 'M yy',
    beforeShow: function (input, inst) {
        $(inst.dpDiv).addClass('calendar-off');
    },
    onClose: function (dateText, inst) {
        var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
        var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
        $(this).datepicker('setDate', new Date(year, month, 1));
    }
});

Answer 1

您可以考虑在之前加载的数组中检查beforeShowDay中是否存在显示的月份。

代码：

monthArray = [0, 2, 3, 8]

$(function () {
    $("#datepicker").datepicker({
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        dateFormat: 'M yy',
        beforeShowDay: function (date) {
            //getMonth()  is 0 based
            if ($.inArray(date.getMonth(), monthArray) > -1) {
                return [true, ''];
            }
            return [false, ''];
        }
    });

});

演示：http://jsfiddle.net/IrvinDominin/4Vz6b/

修改

您每年只使用css hack显示一个月，在这种情况下，您希望限制显示月份。

如果您显示日期，第一个解决方案就会出现问题，但事实并非如此。

考虑到我使用.ui-datepicker-month事件有任何afterShow事件（或类似事件），您可以考虑使用类focus从select中隐藏不允许的选项。在函数中，我检查显示的月份是否在允许列表中。

代码：

monthArray = [0, 2, 3, 8]

$(function () {
    $("#datepicker").datepicker({
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        dateFormat: 'M yy',
        beforeShow: function (input, inst) {
            $(inst.dpDiv).addClass('calendar-off');
        },
        onClose: function (dateText, inst) {
            var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
            var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
            $(this).datepicker('setDate', new Date(year, month, 1));
        }
    }).focus(function () {
        $($.grep($("select.ui-datepicker-month option"),

        function (n, i) {
            return $.inArray(parseInt(n.value, 10), monthArray) > -1 ? false : true;
        })).hide()
    });;
});

演示：http://jsfiddle.net/IrvinDominin/Q3f29/

限制月份日期选择器中的月视图

1 个答案:

修改