Jquery datepicker 只有年和月 如何设置CSS 在有多个datepickers 时隐藏日历？

Question

我尝试设置一个 Jquery DatePicker，只有月份和年份。而且我需要禁用日历显示，因为用户不会使用它。

为了执行这个日期选择器，我看了一下这个 post，它非常有趣：jQuery UI DatePicker to show month year only .

效果很好，日期选择器没有问题。但是在我的网页中，我需要两个日期选择器。第一个具有基本配置，第二个只有几个月和几年。

因此，如果我像这样编辑第二个 class：

<style>
.ui-datepicker-calendar {
    display: none;
    }
</style>

结果应用于两个日期选择器。

然后我决定使用函数 focus 和 blur 来改变我的日期选择器 class 的状态，如下所示：

$("#DateTimePicker2").focus(function () {
    $(".ui-datepicker-calendar").hide();      
});

$("#DateTimePicker2").blur(function () {
    $(".ui-datepicker-calendar").show();
});

它只工作一次，在第一次点击时，日历会再次出现。

是否有另一种方法可以仅针对第二个日期选择器更改 CSS class？

这是日期选择器的代码：

$("#DateTimePicker2").datepicker({
    dateFormat: "mm/yy", changeMonth: true,
    changeYear: true,
    changeDay: false,
    yearRange: '-1:+5',
    monthNamesShort: ['Janv.', 'Févr.', 'Mars', 'Avril', 'Mai', 'Juin', 'Juil.', 'Août', 'Sept.', 'Oct.', 'Nov.', 'Déc.'],
    onChangeMonthYear: function (year, month, inst) { $(this).val($.datepicker.formatDate($(this).datepicker('option', 'dateFormat'), new Date(year, month - 1, 1))); $(this).datepicker('hide'); },
    onClose: function (dateText, inst) { var date = new Date(inst.selectedYear, inst.selectedMonth, 1); $(this).datepicker('option', 'defaultDate', date); $(this).datepicker('setDate', date); },
    beforeShow: function (input, inst) { inst.dpDiv.addClass('datepicker-month-year'); }
}).datepicker("setDate", new Date())

Answer 1

您可以将 CSS 限制为仅在日期选择器具有您在 beforeShow 中添加的自定义 class 时隐藏日历，例如：

.no-calendar-here .ui-datepicker-calendar {
    display: none;
}

然后：

$("#DateTimePicker1").datepicker({
    beforeShow: function (input, inst) {
        inst.dpDiv.removeClass("no-calendar-here");
    }
});
$("#DateTimePicker2").datepicker({
    beforeShow: function (input, inst) {
        inst.dpDiv.addClass("no-calendar-here");
    }
});

这是一个示例 fiddle，源自链接的问题：http://jsfiddle.net/zd2amwtk/1/