CODEWITHSUNDEEP
cssjquery-uijquery-ui-datepicker
bloodcell
bloodcell

Reputation: 601

jQuery UI datepicker - css class for datepicker's pop-up

Does anyone know how do I specify that jQuery UI's datepicker will have my own CSS class?

I'm not talking about the div\input that the datepicker is "made on", rather about the pop-up that comes up when you open up the datepicker.

This div's id is: ui-datepicker-div

I can define my own styles for that pop-up using

.ui-datepicker { blah }

but, what if I have several datepickers, and want different styles for each? I can't even do something like

.myContainer .ui-datepicker { blah }

Since the datepicker's div is added by jQuery such that it is right under "body" in the DOM. That's why I'm asking if there is a way to specify to jQuery UI to add my own class to that div, sort of like the "dialogClass" option that exists with jQuery UI's dialog ...

Thanks

Upvotes: 4

Views: 5939

Answers (3)

andyb
andyb

Reputation: 43823

You are correct that there is only one actual datepicker UI element on the page, but you could use the beforeShow event to add a class or change a theme for different elements. I added a small demo here that changes the border for different datepickers. You could add in other styles as you need. Might even be possible to swap to different jquery themes with enough effort :-)

Upvotes: 3

Andrew Jackman
Andrew Jackman

Reputation: 13966

By default JQuery UI doesn't support multiple calendar styles on 1 page. It could be possible to alter the datepicker component to include it, but you would have to take the time to figure out how to modify the javascript.

Upvotes: 0

Paul Creasey
Paul Creasey

Reputation: 28844

I don't think it is possible with a simple option, but it is possible i think, the code can be seen here.

You should be able to see where the classes are set, I'm no javascript guru, but it should be possible to do something like this:

Datepicker.prototype._currentClass = Datepicker.prototype._currentClass + '-theme1';

then define a class as ui-datepicker-current-day-theme1

Somebody may correct me though!

Upvotes: 0

Related Questions