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

Posted 2023-05-07

【中文标题】jquery UI datepicker 月份和年份只有 css 定位问题

【英文标题】：jquery UI datepicker month and year only css positioning problem

【发布时间】：2011-08-14 13:50:28

【问题描述】：

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

大概这是因为我在选择器中动态隐藏了月份中的天数 jquery 计算了它的高度，因此它的位置就好像它仍然是完整的日期选择器一样。有人知道如何解决这个问题吗？

【参考方案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));
        
    
);

【讨论】：

谢谢安迪，你的方法解决了这个问题。