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

如标题所示，我希望Datepicker的“ui-datepicker-div”设置为flex。我的目标是创建一个灯箱，但我不知道如何轻松完成。我在jquery ui的代码中做了一些实验来了解它为什么不按照它应有的方式工作。我通过重写“显示”来尝试“beforeShow”，但没有运气。jQuery UI Datepicker：如何将容器的显示设置为flex？

最后，由Datepicker创建的inline-css的结果始终是“block”，尽管console.log告诉我它设置为“flex”（在beforeShow中）。

有什么想法？

在此先感谢！

来源

2017-06-28 testbytest

欢迎StackOverflow的，请花点时间查看游览：https://stackoverflow.com/tour，如何创建一个最小，完整和可验证的示例：https://stackoverflow.com/help/mcve，更具体地说， *如何提出好问题* https://stackoverflow.com/help/how-to-ask - 如果您在寻求帮助之前对自己的问题进行了一些思考，并获得更好的反馈和有帮助的答案，代码*的一个特定问题，您尝试过*显示努力自己解决问题。 – mjw

难道你不能只使用覆盖显示的CSS规则吗？在样式表中重新定义这个类，或者将另一个类添加到Datepicker容器中，并重新定义该类的显示。请记住，CSS根据选择器的具体特点决定使用哪个属性的值。我的意思是，'div.my-class {}'中的属性会覆盖'.myclass {}' –

@FabioLolli：这是不可能的，因为据我所知，内联CSS规则中的任何其他定义的CSS。 Datepicker显示是通过内联CSS设置的... – testbytest

如果你真的想用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; 
}

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

来源

2017-06-28 16:19:25

“！important”的工作原理非常好:-)非常感谢！ – testbytest

不幸的是，它不能很好地工作 - 乍一看，这似乎工作，但在淡入之后，窗口保持打开，无论我选择一个日期。 – testbytest

Mmh我认为这是因为它也会重写'display：none' ...你可以尝试在打开的事件中向datepicker添加一个'！important'位的类，并在close事件中移除该类。 –

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

回答

相关问题