jquery UI datepicker月和年只有css定位问题

Question

我已经实现了这里讨论的解决方案: JQuery Datetime选择器 - 只需选择月份和年份.它运作良好.我发现的唯一问题是,当日期选择器出现在输入字段上方时(例如,当下面没有足够的空间时),选择器的位置是错误的(它太高,在选择器和输入之间留下间隙)领域).

大概这是因为我在 jquery计算其高度后动态隐藏了月中的日期,因此它被定位为好像它仍然是完整的datepicker.任何人有任何想法如何解决这个问题？

Answer 1

您可以datepicker在显示之前对其进行操作，但请记住，如果页面上有其他日期选择器，则需要重置它，因为只有 1 个实际的日期选择器<div>。

我创建了一个演示，它可能会满足您的需求。希望能帮助到你。

超文本标记语言

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（需要 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));
        }
    }
});