jquery UI datepicker月和年只有css定位问题 [英] jquery UI datepicker month and year only css positioning problem

问题描述

我已经实现了这里讨论的解决方案：
JQuery日期时间选择器 - 需要选择月和年只。，它运行良好。我发现的唯一问题是，当日期显示器出现在输入字段上方时（例如，当下面没有足够的空间时），选择器的位置是错误的（它太高了，在选择器和输入之间留有间隙字段）。

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计算其高度的月份，因此它是就像它仍然是完整的日期选择器。

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?

推荐答案

您可以操纵 datepicker ，但是请记住，如果页面上有其他日期选择器，则需要重置，因为只有1个实际日期选择器< div> 。

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 （需要jQuery和jQueryUI） p>

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));
        }
    }
});

这篇关于jquery UI datepicker月和年只有css定位问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！