Jquery 同一页中有两个不同的日期选择器

在同一页上显示两个日期选择器时出现问题。应该显示一个隐藏体，如下所示

另一个应该是一个定期的约会选择者

要实现第一个功能，我需要执行以下操作：

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

有人对如何实现这一目标有想法吗

谢谢

更新：

这是我现在所拥有的东西的一部分

你能试试吗

在JS中 $'.ui日期选择器日历'.hide； $'.ui日期选择器日历'.show

在CSS中

$('.ui-datepicker-calendar').css('visibility', 'hidden');
$('.ui-datepicker-calendar').css('visibility', 'visible');

---

我最终使用以下代码找到了一个可接受的解决方案：

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

并完全删除css

---

这里是工作

你会考虑添加一些叙述来解释为什么这个代码工作，什么使它成为问题的答案？这对提出问题的人和其他任何人都非常有帮助。

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