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

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

• 普通的
• 只能选择年/月的“特殊”值

特别的一个使用一些定制的CSS（）来隐藏日历部分，因此只显示月份/年份

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

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

---

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

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

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

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

---

我还没有测试那段代码，但是你应该得到jist。希望有帮助

我正在解决同样的问题。上面的答案行不通。本评论中提供的解决方案起到了什么作用：

我对它做了一些修改，下面是我得到的：

$('#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');
    }
});

$（'startDate'）。日期选择器（{
显示前：功能（输入、安装）{
var newclass='calendar base hideDates'；
var p=inst.dpDiv.parent（）；
如果（！p.hasClass（'calendar-base'））
仪器dpDiv.包装（“”）；
其他的
p、 removeClass（'showDates'）.addClass（'hideDates'）；
}
});
$（“#生日”）。日期选择器（{
显示前：功能（输入、安装）{
var newclass='日历基准显示日期'；
var p=inst.dpDiv.parent（）；
如果（！p.hasClass（'calendar-base'）{
仪器dpDiv.包装（“”）；
其他的
p、 removeClass（'hideDates'）.addClass（'showDates'）；
}
});

---

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

我建议您不要使用CSS，而是在为“特殊”日期选择器触发焦点事件时，通过隐藏日历来创建相同的效果

如果设置为使用CSS，则可以将日期选择器附加到div元素而不是输入元素。这样，每个.ui日期选择器日历都位于其自己的div中，您可以应用单独的样式。缺点是，您使用的是div而不是输入，在加载页面时会立即显示，并且没有onClose事件。下面是使它工作的最简单的代码

HTML:

CSS:

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

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

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