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...

This question is unclear. Add JS code you have so far and point out more closely what you want to do. — Tomalak, Jul 26 '11 at 15:35
I have edited the question - what is unclear? I want to add a class to each of the datepicker div's the class name should be the same as the ID of the element which triggered the datepicker. — Mazatec, Jul 26 '11 at 15:40
Not impossible (as I seem to remember hacking something together to change some CSS in the past) but there is actually only one `
` element, no matter how many ``s you have. — andyb, Jul 26 '11 at 15:51

andyb · Accepted Answer · 2012-11-23T07:54:17.927

42

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);
   }
});

edited Nov 23 '12 at 07:54

answered Jul 26 '11 at 15:57

andyb

43,435
12
121
150

12

`$('#ui-datepicker-div')` can be replaced by `inst.dpDiv` for a cleaner/better solution :) – Sisir Jul 15 '14 at 04:01
This affects all datepicker on the site, not just the current one, and even those not binded with $('input').datepicker(); – Jonathan Nov 02 '15 at 12:37
@xcy7e웃 there is only one datepicker. This has always been the case with jQueryUI. It doesn't matter how many times it is used. There is only 1 added to the DOM. This solution correctly adds the `id` of the `` which is what the question was asking. – andyb Nov 02 '15 at 14:03
2

Can you tell a common approach to have multiple datepickers that differs from each other in design and look? – Jonathan Nov 03 '15 at 08:30
@xcy7e The example code uses the id of the input control, so you can adapt your css per control. For example, `.ui-datepicker.MyControlId { color: black; }`. If you want different styles for different screens or different areas of the page, you can adapt the code to check for the presence of some parent: `if ($('#' + this.id).parents('.some-parent-class').length) $('#ui-datepicker-div').addClass('a-special-class');` – Savage Jun 20 '19 at 13:55

score 3 · Answer 2 · edited Oct 04 '17 at 16:13

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>');
           }
      }
 });

score 1 · Answer 3 · answered Sep 17 '19 at 16:27

You can try this to add css Classes for multiple datepicker.

But remeber jQuery UI - v1.9.1 is not up-to-date last version is from 2012-10-25

HTML:

<input type="text" id="datepicker1" name='date1'/>
<input type="text" id="datepicker2" name='date2'/>

Jquery:

$('#datepicker1').datepicker( {
    changeMonth: false,
    changeYear: true,
    showButtonPanel: true,
    dateFormat: 'yy',
    showAnim: '',
    beforeShow: function( input, inst){
      $(inst.dpDiv).addClass('just-yaer');
    },
    onClose: function(dateText, inst) { 
        var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
        $(this).datepicker('setDate', new Date(year, 1));
        $(inst.dpDiv).removeClass('just-yaer');
    }
});

$('#datepicker2').datepicker( {
    changeMonth: true,
    changeYear: false,
    showButtonPanel: true,
    dateFormat: 'MM',
    showAnim: '',
    beforeShow: function( input, inst){
      $(inst.dpDiv).addClass('just-month');
    },
    onClose: function(dateText, inst) { 
        var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
        $(this).datepicker('setDate', new Date(month, 1));
        $(inst.dpDiv).removeClass('just-month');
    }
});

CSS:

.just-yaer .ui-datepicker-prev,
.just-yaer .ui-datepicker-next,
.just-yaer .ui-datepicker-month,
.just-yaer .ui-datepicker-calendar {
    display: none;
}

.just-month .ui-datepicker-prev,
.just-month .ui-datepicker-next,
.just-month .ui-datepicker-year,
.just-month .ui-datepicker-calendar {
   display: none;
}

Working fiddle:

http://jsfiddle.net/g6mnofu2/27/

score 0 · Answer 4 · answered Aug 13 '15 at 10:33

I would simple set an attribute and use it instead of the class. in this case you dont need to remove anything because it will be overridden

$('input').datepicker({
   beforeShow: function(input, inst) {
       $('#ui-datepicker-div').attr("inputId",this.id);
   }
});

the to affect in JQ

$('#ui-datepicker-div[inputId=your_ID_here]')

in CSS

#ui-datepicker-div[inputId=your_ID_here]{}

score 0 · Answer 5 · answered Jun 20 '23 at 04:53

$("#departure-date, #return-date").datepicker({
    // other options...
    beforeShow: function (input, instance) {
        // Add a custom className to the datepicker element
        $(instance.dpDiv).addClass("my-datepicker");
    },
    // other options...
});

How to add a custom class to my JQuery UI Datepicker

5 Answers5

Linked