jquery - Two Different Datepickers in the same page -

i have problem displaying 2 datepickers on same page. 1 should displayed hidden body

and other 1 should regular datepicker.

to achieve first functionality this:

$('.date-picker').datepicker( {   changemonth: true,   changeyear: true,   showbuttonpanel: true,   dateformat: 'mm yy' }); 

and using css hide body:

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

but when want display second datepicker cannot overwrite css style.

i tried

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

i tried removing style attribute still no luck.

$('.ui-datepicker-calendar').removeattr('style'); 

does has idea on how achieve this?

thanks

update:

this fiddle of have right now

i have reached acceptable solution using code:

            $('#startdate').focusin(function() {                 $('.ui-datepicker-calendar').hide();             });             $('#startdate').focusout(function() {                 $('.date-picker').datepicker('close');                 $('.ui-datepicker-calendar').show();             }); 

and removing css.

here working fiddle