jquery - 同一页面中的两个不同的日期选择器

Question

我在同一页面上显示两个日期选择器时遇到问题。应该是这样用隐藏体显示的

另一个应该是一个普通的日期选择器。

为了实现我这样做的第一个功能:

$('.date-picker').datepicker( {
  changeMonth: true,
  changeYear: true,
  showButtonPanel: true,
  dateFormat: 'MM yy'
});

然后通过使用 css 我隐藏正文:

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

但是当我想显示第二个日期选择器时，我无法覆盖该 css 样式。

我试过了

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

我什至尝试完全删除样式属性，但仍然没有成功。

$('.ui-datepicker-calendar').removeAttr('style');

有没有人知道如何实现这一目标？

谢谢

更新:

这是一个 fiddle我现在拥有的东西

Answer 1

我终于使用这段代码找到了一个可接受的解决方案:

            $('#startDate').focusin(function() {
                $('.ui-datepicker-calendar').hide();
            });
            $('#startDate').focusout(function() {
                $('.date-picker').datepicker('close');
                $('.ui-datepicker-calendar').show();
            });

并完全删除 css。

这是工作 fiddle