Question

I need to do simple task :

show 2 datepickers :

one – by month and year , seocond – regular.

i have succed to find the css style which hides the calendar part and show only the month and year :

<style type="text/css">
      .ui-datepicker-calendar {    display: none;    }​
</style>

but i cant find away telling : this datepicker instance SHOULD self-apply this css ,and the other should NOT.

how can fix my code to apply the css only to 1 control ?

Answer 1

Either add a second class explicitly to the date picker that has display: none as its only attribute, or explicitly set the style of the restricted date picker, e.g.:

$('.ui-datepicker-calendar').first().css('display', 'none');

EDIT 1 that doesn’t work – the two date pickers share the same elements so you can’t tell them apart like that.

EDIT 2 The best I’ve been able to do so far is to add this:

$('#datepicker').click(function() {
    $('.ui-datepicker-calendar').hide();
});

Which does hide the calendar, but does unfortunately make it appear very briefly before it disappears.

EDIT 3 Solved! 🙂

The trick is to apply your global CSS to every date picker so that they’re hidden by default, but then explicitly show the calendar fields for the other one whenever it’s triggered:

$('#datepicker2').click(function() {
    $('.ui-datepicker-calendar').show();
});

This is much more visually appealing than having the calendar appear for a fraction of a second and then disappear again.

NB: you may have to register this handler for any other UI events that will cause the date picker to appear – .click() on its own may be insufficient.

Working demo at http://jsbin.com/oredoy/