Как добавить CSS в DatePicker JQuery?

Question

Как добавить CSS в DatePicker JQuery?

0

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

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

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

Chester 13 дек. 2013, в 13:23

Источник

Теги:

jquery

css

datepicker

3 ответа

1

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

например

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

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

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

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

Abhitalks 13 дек. 2013, в 10:54

0

этот работает для меня, спасибо много :)
Attila Naghi 13 дек. 2013, в 12:16

1

$("#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.

Praveen 13 дек. 2013, в 10:12

Ещё вопросы

этот работает для меня, спасибо много :)

MLeFevre · Accepted Answer · 2013-12-13T10-13-00.000Z

datepicker создает элемент с id #ui-datepicker-div

поэтому вы можете просто использовать общее правило css

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

Side Note: Лично я бы не рекомендовал менять значение в самом файле ui css, так как всякий раз, когда вы обновляете jquery ui, вам придется помнить о том, чтобы каждый раз изменять его значение.

этот пример, это также работает, спасибо :)