JQuery datepicker, months year only on input

Question

I have a question, quite similar to the one at: year/month only datepicker inline
The difference is that I am using the input version, rather than the div .
In the div case, the ui-datepicker-calendar is inside the outer div, and so can be accessed uniquely.
But with the input , there is no relation between the input and the ui-datepicker-calendar (or, not that I've found...)
Just to be clear, I cannot use the "global" .ui-datepicker-calendar { display: none;} , as I have other datepicker that is a full one (ie, uses the days as well).
My code looks as follows:

$("#monthsYearInput").datepicker({
    changeMonth: true,
    changeYear: true,
    dateFormat: "mm/yy",

    onClose: function(dateText) {
        if (dateText != "") {
            var selectedDate = $.datepicker.parseDate("dd/mm/yy", "01/" + dateText);

            $(this).datepicker("setDate", selectedDate);
            $(this).datepicker("refresh");
        }
    },

    beforeShow: function() {
        var dateText = $(this).val();
        var isPopulated = dateText.length > 0;

        if (isPopulated) {
            var selectedDate = $.datepicker.parseDate("dd/mm/yy", "01/" + dateText);

            $(this).datepicker("option", "defaultDate", selectedDate);
            $(this).datepicker("setDate", selectedDate);
            $(this).datepicker("refresh");
         }
    },

    onChangeMonthYear: function(year, month) {
      if (changingDate) {
        return;
      }

      changingDate = true;
      $(this).datepicker("setDate", new Date(year, month - 1, 1));
      $(this).datepicker("refresh");
      changingDate = false;
    }
  });

$("#monthsYearInput").focus(function () {
    $(".ui-datepicker-calendar").hide();
};

$("#monthsYearInput").blur(function () {
    $(".ui-datepicker-calendar").hide();
};

It all looks OK as start, but then when the year/month has changed, the new date is populated in the input (desired), but now the calendar displays (not desired).

Any ideas on how to solve this issue?...

Thanks in advance.

JSfiddle: http://jsfiddle.net/OhadRaz/8z9M2/

Answer 1

我认为您仍然可以使用已链接的解决方案中的CSS来做到这一点，但仅针对该日期选择器

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

Answer 2

Can you put your code on JSFiddle so we can see what it is doing? I may have done something familiar at Jquery Datepicket Supress Year , but can't tell without a JSFiddle demo...

Answer 3

OK,
I came up with some sort of a solution:

var superUpdateDatepicker = $.datepicker._updateDatepicker;

$.datepicker._updateDatepicker = function(inst) {
    var ret = superUpdateDatepicker.apply(this, arguments);

    if (inst.id == "monthsYearInput") {
      $(".ui-datepicker-calendar").hide();
    }

    return ret;
}

While working, I am not happy with it.
It is too hacky, it is not clean, and I just don't like it.

Any better ideas?...