javascript - jQuery UI 日期选择器 : how to set container's display to flex?

Question

正如标题所说，我希望将Datepicker的“ui-datepicker-div”设置为flex。我的目标是创建一个灯箱，但我不知道如何轻松完成。我在 jquery ui 的代码中做了一些实验来理解，为什么它不能按预期的方式工作。我通过覆盖“显示”尝试了“beforeShow”，但没有成功。

尽管 console.log 告诉我它被设置为“flex”(在 beforeShow 内)，但最终由 Datepicker 创建的内联 css 的结果总是“ block ”。

有什么想法吗？

提前致谢!

Answer 1

如果您真的想使用 JavaScript 执行此操作并且内联 css 不断妨碍您，您可以尝试使用 $myDatepickerReference.removeAttr('style') 完全删除内联 css 但是将删除所有 Datepicker 的内联 css。或者您可以读取“样式”的值，删除指定显示的部分，然后使用 $myDatepickerReference.attr('style', newValue)

设置正确的值

如果您迫切希望在您的 css 文档中指定 !important 之后该属性将覆盖所有其他相同类型的类属性 - 您可以尝试以这种方式工作是否如您所愿，然后从那里着手确定问题所在。如果它也不能以这种方式工作，则可能在某处存在其他类型的错误

#ui-datepicker-div {
    display: flex !important;
}

回复评论:

我认为问题是显示属性中的 !important 子句将继续覆盖该值，即使应该关闭日期选择器 - 这意味着 display: none 不会隐藏它了。你可以做的是创建一个新类

.my-flex-datepicker {
    display: flex !important;
}

然后在datepicker的打开和关闭事件中，分别在$('#ui-datepicker-div')

中添加和删除这个新类