Question

我已经实现了这里讨论的解决方案： JQuery Datetime picker - Need to pick month and year only.它运作良好。我发现的唯一问题是，当日期选择器出现在输入字段上方时（例如，当下面没有足够的空间时），选择器的位置是错误的（它太高，在选择器和输入之间留下间隙）字段）。

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

Answer 1

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

我有created a demo可能会做你想要的。希望它有所帮助。

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

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

1 个答案: