How to add a custom class to my JQuery UI Datepicker

Question

I have several inputs which trigger JQuery UI datepickers e.g.

<input id="one" type="text"/> <input id="two" type="text"/> <input id="three" type="text"/> <input id="four" type="text"/> 

For each jquery UI datepicker created, I want to assign a custom class based on the ID of the input which triggered it i.e. .one, .two, .three

So if the datepicker is triggered by the first input the resulting HTML will look like:

  <div class="one ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" id="ui-datepicker-div"> 

Note the first class one

Is this possible? The 'create' method of the datepicker does not seem to work for me...

Answer 1

beforeShow can be used to manipulate the class before showing the datepicker.

$('input').datepicker({    beforeShow: function(input, inst) {        $('#ui-datepicker-div').removeClass(function() {            return $('input').get(0).id;         });        $('#ui-datepicker-div').addClass(this.id);    } }); 

Demo (using jQuery 1.6.2 but needs jQuery > v1.4 for the .removeClass() which takes a function)

Note This works by removing all the classes (i.e. <input> ids) with a **general $('input') selector which you might want to limit to just pick up the <input> elements that have been modified into date pickers.

Edit Just had an upvote for this and looking at the code, it did not seem to do what I explained it should (maybe I misunderstood the question!). So, here is a version which adds a class equal to the id of the <input> clicked on to the datepicker. Also uses the original .removeClass() so this will work with jQuery > v1.2.

var inputIds = $('input').map(function() {     return this.id; }).get().join(' '); // space separated ready for removeClass  $('input').datepicker({    beforeShow: function(input, inst) {        $('#ui-datepicker-div').removeClass(inputIds);        $('#ui-datepicker-div').addClass(this.id);    } });​ 

Answer 2

Jquery UI custom download allows you to add a custom prefix to your theme, say you added a prefix ".datepicker_wrapper" you can add this class to your datepicker this way :

 $('.datepicker').datepicker({       beforeShow : function(){            if(!$('.datepicker_wrapper').length){                 $('#ui-datepicker-div').wrap('<span class="datepicker_wrapper"></span>');            }       }  });