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？

回答

相關問題