多个不同的造型

Question

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

• 有规律的一个
• “特殊”一说只能挑选岁/月。

特殊的使用一些自定义CSS（from here）来隐藏日历部分，所以只显示月份/年份。

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

但是，由于页面上只有一个对话框实例，所以两个拾取器都隐藏日历。

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

Answer 1

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

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

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

我还没有测试过该代码，但您应该获得jist。希望有所帮助！

Answer 2

我正在解决同样的问题。上面的答案不起作用。什么做的工作是在此评论所提供的解决方案：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'); 
    } 
}); 

我检查了它和它的作品。

Answer 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; 
    }