2 Datepicker在jQuery上的不同格式？

Question

我需要做一个简单的任务：

显示2个datepickers：

一个 - month and year，seocond - regular。

我已经成功找到隐藏日历部分并仅显示月份和年份的css样式：

<style type="text/css">
      .ui-datepicker-calendar {    display: none;    }​
</style>

但是我无法告诉：这个datepicker实例应该自我应用这个css，而另一个 NOT 。

如何解决我的 code 将css 仅应用于1个控件？

Answer 1

将第二个类明确添加到以display: none作为其唯一属性的日期选择器，或者显式设置受限日期选择器的style，例如：

$('.ui-datepicker-calendar').first().css('display', 'none');

编辑1 不起作用 - 两个日期选择器共享相同的元素，因此您不能将它们区分开来。

编辑2 迄今为止我能做的最好的就是添加：

$('#datepicker').click(function() {
    $('.ui-datepicker-calendar').hide();
});

哪个 隐藏了日历，但遗憾的是它会在它消失之前显得很短暂。

编辑3 解决了！ ：）

诀窍是将您的全局CSS应用于每个日期选择器，以便它们默认隐藏，但随后显式显示另一个日历字段它被触发了：

$('#datepicker2').click(function() {
    $('.ui-datepicker-calendar').show();
});

这比让日历显示几分之一秒然后再次消失更具视觉吸引力。

注意：您可能必须为导致日期选择器出现的任何其他UI事件注册此处理程序 - .click()本身可能不够。

http://jsbin.com/oredoy/

的工作演示

Answer 2

如果我理解正确，你会对两个datepickers使用相同的css类 - ＆gt;它们的行为都一样（如预期的那样）。

定义2个单独的类“ui-calendar-monthYear”和“ui-calendar-regular”并将它们分配给你的日期选择器。