I want to personalize the datepicker from jQuery. i want to add z-index:2.
$(function(){
$("#datepicker" ).datepicker({ dateFormat: "yy-mm-dd" });
$("#datepicker").css("z-index",2);
});
I know that the line "$("#datepicker").css("z-index",2);" doesn't affect datepicker, but I want smth like this. How can I do that ? Thx in advance
$("#datepicker").css("z-index",2); //refers the element
The above line does not refer to datepicker calendar, it refers to the element(maybe textbox or div).
Rather you should inspect the jQuery calendar to find the right element.
here is what I got,
$("#ui-datepicker-div").css("z-index",2); //refers the datepicker calendar div
FYI: This should be added after initializing the datepicker, other wise do it in CSS.
A better method would be to customize the jQuery UI css by overriding the relevant ones in your application css.
e.g.
.ui-datepicker {
z-index: 2;
}
Just make sure that your application css is loaded last so as to override the jQuery UI classes. You may also use the !important, in case you can't.
Also, note that jQuery UI may not always give an ID, so it is advisable to rely on original jQuery UI classes.
What I have noticed is, that the calendar is usually wrapped inside a div with an id=fullCalHolder and class=hasDatepicker. So, it would be easier you to find the specific element while you inspect in developer tools.
datepicker creates an element with id #ui-datepicker-div
so you could just use a general css rule
#ui-datepicker-div {
z-index:2 !important;
}
Side Note: Personally I wouldn't recommend changing the value in the ui css file itself, as whenever you update jquery ui, you'll have to remember to alter its value every time.
