Question

I’m wanting to use jQuery-UI on a page with multiple instances where some instances use the standard full calendar format and other instances uses the month/year without the calendar.

The month/year is from an earlier stack: jQuery UI DatePicker to show month year only

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

<script type="text/javascript">
$(document).ready(function() {
  $('#monthyearpicker1').datepicker( {
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    dateFormat: 'MM yy',
    beforeShow: function(input, inst) {
      $(inst.dpDiv).addClass('calendar-off');     
    },
    onClose: function(dateText, inst) { 
      var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
      var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
      $(this).datepicker('setDate', new Date(year, month, 1));
    }
});
$( "#datepicker1" ).datepicker({
    changeMonth: true,
    changeYear: true,
    dateFormat: 'yy-mm-dd'
  });
});
</script>

<label>Month Year Picker: </label>
<input type="text" id="monthyearpicker1" class="monthyearpicker"><br /><br />

<label>Date Picker: </label>
<input type="text" id="datepicker1" class="datepicker">

I don’t want the calendar to be displayed in the month/year picker (.monthyearpicker) and that is the behaviour I get. However, I do want it displayed in in the full datepicker (.datepicker) put it is not displayed. The addClass in the monthyearpicker’s beforeShow seems to “bleed through” into the full datepicker by removing it’s display. How do I get my cake and eat it?

Note that I would prefer to use classes instead of IDs to differentiate between the datepicker and monthyearpicker as I will have multiple instances of each on the one page.

Many thanks,
Scott

Answer 1

You can add beforeShow to remove the calendar-off class:

$( "#datepicker1" ).datepicker({
    changeMonth: true,
    changeYear: true,
    dateFormat: 'yy-mm-dd',
    beforeShow: function(input, inst) {
      $(inst.dpDiv).removeClass('calendar-off');     
}
  });
});

JSFIDDLE EXAMPLE