I have two jQuery date pickers on my page:

• A regular one
• A "special" one that can only pick years/months.

The special one uses some custom CSS (from here) to hide the calendar part, so only the month/years show up.

.ui-datepicker-calendar {
    display : none ;
}

However, since there is only one dialog instance on the page, the calendar is hidden for both pickers.

Is there a way to only apply this style to one of the instances? I've checked the docs to see if I could add a custom class to the dialog, but I couldn't find it.

I have two jQuery date pickers on my page:

• A regular one
• A "special" one that can only pick years/months.

The special one uses some custom CSS (from here) to hide the calendar part, so only the month/years show up.

.ui-datepicker-calendar {
    display : none ;
}

However, since there is only one dialog instance on the page, the calendar is hidden for both pickers.

Is there a way to only apply this style to one of the instances? I've checked the docs to see if I could add a custom class to the dialog, but I couldn't find it.

• javascript
• jquery
• jquery-ui

3 Answers 3

I'm solving the same problem. The answer above doesn't work. What did work was the solution provided in this ment: http://www.filamentgroup./lab/using_multiple_jquery_ui_themes_on_a_single_page/#mentNumber16

I've modified it a bit and here's what I got:

$('#startDate').datepicker( {
    beforeShow: function(input, inst) {
        var newclass = 'calendar-base hideDates'; 
        var p = inst.dpDiv.parent();
        if (!p.hasClass('calendar-base'))
            inst.dpDiv.wrap('<div class="'+newclass+'"></div>');
        else
            p.removeClass('showDates').addClass('hideDates');
    }
});
$('#birthDate').datepicker( {
    beforeShow: function(input, inst) {
        var newclass = 'calendar-base showDates'; 
        var p = inst.dpDiv.parent();
        if (!p.hasClass('calendar-base')){ 
            inst.dpDiv.wrap('<div class="'+newclass+'"></div>');
        else
            p.removeClass('hideDates').addClass('showDates');
    }
});

I've checked it and it works.

You could run change the css manually in the beforeShow event, for each input. The code would look like this:

$("#regularInput").datepicker({
                   beforeShow: function(input, inst) {
                                    $(".ui-datepicker-calendar").show();
                                }
                   });

$("#specialInput").datepicker({
                   beforeShow: function(input, inst) {
                                    $(".ui-datepicker-calendar").hide();
                                }
                   });

I haven't tested that code, but you should get the jist. Hope that helps!

I suggest that instead of using CSS, you should follow https://stackoverflow./a/6013093 instead to create the same effect by hiding the calendar when the focus event is triggered for your "special" datepicker.

If you're set on using CSS, you can attach the datepickers to a div elements instead of input elements. That way each .ui-datepicker-calendar is inside of its own div and you can apply separate stylings. The disadvantages are that you have divs instead of inputs, which appear immediately when you load the page, and don't have an onClose event. Here's the bare minimum code to make it work.

HTML:

    <div id="startDate" class="date-picker" />
    <div id = "special-datepicker" class = "date-picker" </div>

Javascript:

    $(function() {
        $('.date-picker').datepicker( {});
    }); 

CSS:

    #special-datepicker .ui-datepicker-calendar {
        display: none;
    }