jquery UI datepicker month and year only css positioning problem

Question

I have implemented the solution discussed here: JQuery Datetime picker - Need to pick month and year only. and it is working well. The only issue I am finding is that when the datepicker appears above the input field (e.g. when there is not enough room below) then the position of the picker is wrong (it is much too high, leaving a gap between the picker and the input field).

Presumably this is because I am dynamically hiding the days of the month in the picker after jquery calculates its height, hence it is positioned as if it is still the full datepicker. Anyone have any ideas how to fix this?

Answer 1

You could manipulate the datepicker before showing it, but remember it needs to be reset if there are other datepickers on the page since there is only 1 actual datepicker <div>.

I have created a demo which might do what you want. Hope it helps.

HTML

Normal: <input type="text">
<p>No days: <input type="text" class="noDays"></p>

CSS

p {
    position:absolute;
    bottom:5px;
}

div.noDays table {
    display:none;
}

JavaScript (requires jQuery and jQueryUI)

$('input').datepicker({
    showButtonPanel: true,
    changeMonth: true,
    changeYear: true,
    dateFormat:'MM yy',
    beforeShow: function(input, inst) {
        if ($(input).hasClass('noDays')) {
            $('#ui-datepicker-div').addClass('noDays');
        } else {
            $('#ui-datepicker-div').removeClass('noDays');
            $(this).datepicker('option', 'dateFormat', 'yy-mm-dd');
        }
    },
    onClose: function(dateText, inst) {
        if ($('#ui-datepicker-div').hasClass('noDays')) {
            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));
        }
    }
});