CODEWITHSUNDEEP
jquerycssdatepicker
Attila Naghi
Attila Naghi

Reputation: 2686

How do I add css to datepicker jQuery?

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

Upvotes: 0

Views: 5688

Answers (3)

Abhitalks
Abhitalks

Reputation: 28387

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.

Upvotes: 1

SubjectCurio
SubjectCurio

Reputation: 4872

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.

Upvotes: 0

Praveen
Praveen

Reputation: 56501

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

Upvotes: 1

Related Questions