Two jQuery datepicker on the same page with different CSS style

Question

I am trying to implement a couple of jQuery date pickers on the same page with the difference that one of them is going to be a month picker using the suggested solution at jQuery UI DatePicker to show month year only (or... http://jsfiddle.net/DBpJe/7722/)

The point is that if I add the following CSS code to my CSS file that hides the ability to select the day... then the two calendars hide the ability to pick days and not just the one that I need... seems like it is an All or Nothing approach

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

Is there a way I can distinguish from a normal date picker and from the custom month picker that I created (based on jQuery date picker)?

This is my HTML..

<input type="text" size="12" name="codeFlowDate" id="MyDate" class="text" />
<input type="text" size="12" name="codeFlowDate" id="MyMonth" class="text" />

And this is the JS

$(function() {
  $('#MyDate').datepicker({
    showOn: "button",
    buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
    buttonImageOnly: true,
    //showButtonPanel: true,
    maxDate: +0,
  });
});

$(function() {
  $('#MyMonth').datepicker({
    showOn: "button",
    buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
    buttonImageOnly: true,
    maxDate: +0,
    dateFormat: "mm/yy",
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    onClose: function(dateText, inst) {
      function isDonePressed() {
        return ($('#ui-datepicker-div').html().indexOf('ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all ui-state-hover') > -1);
      }

      if (isDonePressed()) {
        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)).trigger('change');

        $('.date-picker').focusout() //Added to remove focus from datepicker input box on selecting date
      }
    },
    beforeShow: function(input, inst) {
      inst.dpDiv.addClass('month_year_datepicker')

      if ((datestr = $(this).val()).length > 0) {
        year = datestr.substring(datestr.length - 4, datestr.length);
        month = datestr.substring(0, 2);
        $(this).datepicker('option', 'defaultDate', new Date(year, month - 1, 1));
        $(this).datepicker('setDate', new Date(year, month - 1, 1));
        $(".ui-datepicker-calendar").hide();
      }
    }
  })
});

Thanks!

EDIT After seeing the replies...

I've added something like this to my code but nothing happens at all...

$(function() {
  $('#MyMonth').datepicker({
    showOn: "button",
    buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
    buttonImageOnly: true,
    maxDate: +0,
    dateFormat: "mm/yy",
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    onClose: function(dateText, inst) {
      function isDonePressed() {
        return ($('#ui-datepicker-div').html().indexOf('ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all ui-state-hover') > -1);
      }

      if (isDonePressed()) {
        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)).trigger('change');

        $('.date-picker').focusout() //Added to remove focus from datepicker input box on selecting date
      }
    },
    beforeShow: function(input, inst) {
      $('.ui-datepicker-calendar').removeClass();
    }
  })

I noticed that the .ui-datepicker-calendar is defined like this in the HTML..

table class=ui-datepicker-calendar

Have you tried "#MyMonth .ui-datepicker-calendar" as the selector? It seems that would reduce the scope enough to what you want. — ryzngard, Jan 19 '16 at 19:24
Yup, I tried that too and it hides everything on both date pickers :( — user3587624, Jan 19 '16 at 19:27
Possible duplicate of [How to add a custom class to my JQuery UI Datepicker](http://stackoverflow.com/questions/6832622/how-to-add-a-custom-class-to-my-jquery-ui-datepicker) — Gavriel, Jan 19 '16 at 19:32
Hi Gavriel, not quite sure how to relate my question to the one you provided. Could you give me some pointers? Thanks! — user3587624, Jan 19 '16 at 19:46

score 0 · Answer 1 · edited May 23 '17 at 12:08

Using selector #id .datepickerClass won't work because the datepicker div is created outside the input. You must use beforeShow to set a class to the calendar div:

$('input').datepicker({
   beforeShow: function(input, inst) {
       $('#ui-datepicker-div').removeClass(function() {
           return $('input').get(0).id; 
       });
       $('#ui-datepicker-div').addClass(this.id);
   }
});

Check out this post

Two jQuery datepicker on the same page with different CSS style

1 Answers1