如何添加css到datepicker jQuery？

Question

我想從jQuery個性化datepicker。我想添加z-index:2。

$(function(){ 
    $("#datepicker").datepicker({ dateFormat: "yy-mm-dd" }); 
    $("#datepicker").css("z-index",2); 
}); 

我知道，行「$("#datepicker").css("z-index",2);」不會影響日期選擇器，但我想水木清華這樣的。我怎樣才能做到這一點 ？ Thx提前

Answer 1

日期選擇器創建一個帶有編號的元素#ui-datepicker-div

，所以你可以只使用一個普通的CSS規則

#ui-datepicker-div { 
    z-index:2 !important; 
} 

旁註：我個人建議不要在UI CSS文件中更改值本身，因爲每當你更新jQuery UI，你將不得不記得每次改變它的值。

Answer 2

$("#datepicker").css("z-index",2); //refers the element 

上述線不指datepicker日曆，它指的是元件（也許textbox或div）。

相反，您應該檢查jQuery calendar找到正確的元素。

這裏是我得到了什麼，

$("#ui-datepicker-div").css("z-index",2); //refers the datepicker calendar div 

FYI：這應該初始化日期選擇器後加入，其他明智的做在CSS。

Answer 3

更好的方法是通過覆蓋應用程序css中的相關部分來定製jQuery UI css。

例如

.ui-datepicker { 
    z-index: 2;  
} 

只要確保您的應用程序的CSS最後加載，以覆蓋jQuery UI類。如果您不能，您也可以使用!important。

此外，請注意，jQuery UI可能而不是總是給一個ID，所以建議依靠原始的jQuery UI類。

我注意到的是，日曆通常用id=fullCalHolder和class=hasDatepicker包裝在div內。因此，當您在開發人員工具中檢查時，找到特定元素會更容易。