CODEWITHSUNDEEP
javascriptjqueryjquery-uidatepicker
Royi Namir
Royi Namir

Reputation: 148524

2 Datepicker 's different format on jQuery ?

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 ?

enter image description here

Upvotes: 0

Views: 243

Answers (2)

Alnitak
Alnitak

Reputation: 339816

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/

Upvotes: 1

Ando
Ando

Reputation: 11409

If I understand correctly you are using the same css class for both datepickers -> they will both behave the same (as expected).

Define 2 separate classes "ui-calendar-monthYear" and "ui-calendar-regular" and assign them to your datepickers.

Upvotes: 0

Related Questions