具有不同样式的多个 jQuery UI 日期选择器答案

【问题标题】：Multiple jQuery UI date pickers with different styling具有不同样式的多个 jQuery UI 日期选择器
【发布时间】：2011-03-19 16:22:58
【问题描述】：

我的页面上有两个 jQuery 日期选择器：

一个普通的
只能选择年/月的“特殊”。

特殊的使用一些自定义 CSS (from here) 来隐藏日历部分，因此只显示月份/年份。

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

但是，由于页面上只有一个对话框实例，因此日历对于两个选择器都是隐藏的。

有没有办法只将此样式应用于其中一个实例？我检查了文档以查看是否可以向对话框添加自定义类，但找不到。

【问题讨论】：

标签： javascript jquery jquery-ui

【解决方案1】：

我正在解决同样的问题。上面的答案不起作用。起作用的是此评论中提供的解决方案：http://www.filamentgroup.com/lab/using_multiple_jquery_ui_themes_on_a_single_page/#commentNumber16

我稍微修改了一下，结果如下：

$('#startDate').datepicker( {
    beforeShow: function(input, inst) {
        var newclass = 'calendar-base hideDates'; 
        var p = inst.dpDiv.parent();
        if (!p.hasClass('calendar-base'))
            inst.dpDiv.wrap('<div class="'+newclass+'"></div>');
        else
            p.removeClass('showDates').addClass('hideDates');
    }
});
$('#birthDate').datepicker( {
    beforeShow: function(input, inst) {
        var newclass = 'calendar-base showDates'; 
        var p = inst.dpDiv.parent();
        if (!p.hasClass('calendar-base')){ 
            inst.dpDiv.wrap('<div class="'+newclass+'"></div>');
        else
            p.removeClass('hideDates').addClass('showDates');
    }
});

我已经检查过了，它可以工作。

【讨论】：

【解决方案2】：

您可以在 beforeShow 事件中为每个输入手动运行更改 css。代码如下所示：

$("#regularInput").datepicker({
                   beforeShow: function(input, inst) {
                                    $(".ui-datepicker-calendar").show();
                                }
                   });

$("#specialInput").datepicker({
                   beforeShow: function(input, inst) {
                                    $(".ui-datepicker-calendar").hide();
                                }
                   });

我还没有测试过那个代码，但你应该得到 jist。希望对您有所帮助！

【讨论】：

【解决方案3】：

我建议您不要使用 CSS，而应遵循 https://stackoverflow.com/a/6013093 来创建相同的效果，方法是在为您的“特殊”日期选择器触发焦点事件时隐藏日历。

如果您打算使用 CSS，您可以将日期选择器附加到 div 元素而不是输入元素。这样每个 .ui-datepicker-calendar 都在其自己的 div 中，您可以应用单独的样式。缺点是您有 div 而不是输入，当您加载页面时会立即出现，并且没有 onClose 事件。这是使其工作的最低限度的代码。

HTML：

    <div id="startDate" class="date-picker" />
    <div id = "special-datepicker" class = "date-picker" </div>

Javascript：

    $(function() {
        $('.date-picker').datepicker( {});
    });

CSS：

    #special-datepicker .ui-datepicker-calendar {
        display: none;
    }

【讨论】：