Как добавить css в datepicker jQuery?

Question

Я хочу персонализировать datepicker из jQuery. Я хочу добавить z-index:2.

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

Я знаю, что линия «$("#datepicker").css("z-index",2);» не влияет на DatePicker, но я хочу чего-л, как это. Как я могу это сделать ? Thx заранее

Answer 1

DatePicker создает элемент с идентификатором #ui-datepicker-div

так что вы могли бы просто использовать общее правило CSS

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

Side Примечание: Лично я не рекомендовал бы изменения значения в файле CSS Ui как всегда, когда вы обновляете 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: Это должно быть добавлено после инициализации DatePicker, другие мудрые сделать это в CSS.

Answer 3

Лучшим методом было бы настроить jQuery UI css, переопределив соответствующие в приложении css.

например.

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

Просто убедитесь, что ваше приложение css загружено последним, чтобы переопределить классы пользовательского интерфейса jQuery. Вы также можете использовать !important, если вы не можете.

Также обратите внимание, что пользовательский интерфейс jQuery может не всегда дает идентификатор, поэтому рекомендуется полагаться на исходные классы пользовательского интерфейса jQuery.

Я заметил, что календарь обычно завернут внутри div с помощью id=fullCalHolder и class=hasDatepicker. Таким образом, вам будет проще найти конкретный элемент во время проверки в инструментах разработчика.