jQuery UI Datepicker：如何将容器的显示设置为 flex？

Question

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

最终由 Datepicker 创建的 inline-css 结果总是 "block"，尽管 console.log 告诉我它被设置为 "flex"（在 beforeShow 内） .

有什么想法吗？

提前致谢！

Answer 1

如果你真的想用 JavaScript 做这个并且内联 css 一直妨碍你，你可以尝试使用 [=12= 完全删除内联 css ] 但这会删除所有 Datepicker 的内联 css。或者您可以读取 'style' 的值，删除指定显示的部分，然后使用 $myDatepickerReference.attr('style', newValue)

设置正确的值

如果您在 css 文档中绝望地在属性之后指定 !important 将使它覆盖相同的所有其他 class 属性类型 - 您可以尝试以这种方式是否按您想要的方式工作，然后从那里继续确定问题所在。如果它也不能以这种方式工作，那么某处可能存在其他类型的错误

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

回复评论：

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

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

然后在日期选择器的打开和关闭事件中，分别添加和删除这个新的class到$('#ui-datepicker-div')

jQuery UI Datepicker：如何将容器的显示设置为 flex？

jQuery UI Datepicker: how to set container's display to flex?

javascript

css

jquery-ui

jquery-ui-datepicker