javascript - 2 Datepicker 在 jQuery 上的不同格式？

Question

我需要做简单的任务：

显示 2 个日期选择器：

一个month and year，第二个- regular。

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

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

但我找不到告诉：这个datepicker实例应该自己应用这个css，而另一个不应该。

如何修复我的代码以将 CSS仅应用于 1 个控件？

在此处输入图像描述

score 1 · Accepted Answer

将第二个类显式添加到具有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()其本身可能是不够的。

score 0 · Accepted Answer

如果我理解正确，您为两个日期选择器使用相同的 css 类->它们的行为都相同（如预期的那样）。

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

2 回答 2