jquery UI datepicker月和年仅css定位问题

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).

我实现了这里讨论的解决方案:JQuery Datetime picker——只需要选择月份和年份。它运行得很好。我发现的唯一问题是，当datepicker出现在输入字段之上(例如，当下面没有足够的空间时)，那么拾取器的位置就错了(它太高了，在拾取器和输入字段之间留下了一个空隙)。

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?

这可能是因为在jquery计算其高度之后，我在挑选器中动态地隐藏了月份的天数，因此它的位置仍然是完整的datepicker。有人知道怎么解决这个问题吗?

1 个解决方案

#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>.

您可以在显示它之前对datepicker进行操作，但是要记住，如果页面上有其他datepickers，那么它需要重置，因为只有一个实际的datepicker

。

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

我已经创建了一个演示，可以做你想做的。希望它可以帮助。

HTML

HTML

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

CSS

CSS

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

div.noDays table {
    display:none;
}

JavaScript (requires jQuery and jQueryUI)

JavaScript(需要jQuery和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));
        }
    }
});

#1