文章/答案/技术大牛

发布

社区首页 >问答首页 >限制月年日期选择器中的月视图

问限制月年日期选择器中的月视图
EN

Stack Overflow用户

提问于 2014-01-01 17:53:30

回答 1查看 1.1K关注 0票数 0

我使用的是jQuery的月份和年份选择器(我隐藏了日期选择器的日期部分)。

在这个日历中，我只需要在月份选择中显示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));
    }
});

jquery

jquery-ui

datepicker

回答 1

Stack Overflow用户

发布于 2014-01-01 20:34:54

您可以考虑在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仅显示一年中的一个月，在本例中，您希望限制月份的显示。

如果您显示日期，第一个解决方案是可行的，但事实并非如此。

考虑到有任何afterShow事件(或类似的事件)，我使用了focus事件，您可以考虑用.ui-datepicker-month类隐藏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/

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/20867407

复制

相似问题

问限制月年日期选择器中的月视图
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问限制月年日期选择器中的月视图EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问限制月年日期选择器中的月视图
EN