只有少数jquery datepickers的自定义css？答案

【问题标题】：Custom css for only few jquery datepickers?只有少数jquery datepickers的自定义css？
【发布时间】：2014-10-08 11:06:20
【问题描述】：

我在表单上有几个 Jquery 日期选择器。

$('#start, #end').datepicker({
    changeYear: true,
    dateFormat: 'yy',
    onChangeMonthYear: function (dateText, inst) {
        var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
        $(this).datepicker('setDate', new Date(year, 1));
    }
});

$("#fulldate").datepicker({dateFormat: "dd-mm-yy"});

我需要在第一次 datepicker 调用中隐藏一些字段，并且在最后一次调用中没有任何变化。如果我写了这样的东西，它会改变 datepicker 的所有实例。

.ui-datepicker-calendar, .ui-datepicker-month {
   display: none;
 }

谢谢帮助。

【问题讨论】：

见stackoverflow.com/questions/6832622/…
谢谢。我在 beforeShow 中挖掘并找到了解决方案。

标签： javascript jquery css jquery-ui datepicker

【解决方案1】：

这段代码非常适合我：

$('#start, #end').datepicker({
    changeYear: true,
    dateFormat: 'yy',
   beforeShow: function(dateText, inst) {
        if ($(this).hasClass('hideCalendar')){
            $(inst.dpDiv).addClass('calendar-off');
        } else
            $(inst.dpDiv).removeClass('calendar-off');
    },
    onChangeMonthYear: function (dateText, inst) {
        var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
        $(this).datepicker('setDate', new Date(year, 1));
    }
});

css:

.calendar-off table.ui-datepicker-calendar {
     display:none !important;
}

【讨论】：

【解决方案2】：

您可以在 datepicker 上使用事件 onSelect，如下所示

$('Your-Selector').datepicker({
onSelect : function(){
}
});

更多文档请参考this link

希望这会有所帮助.......

【讨论】：

谢谢。但是beforeShow更方便。