jquery UI日期选择器月份和年份只有css定位问题

Question

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

大概这是因为我动态地隐藏了选择器之后之后的月份天数，因此它被定位为它仍然是完整的日期选择器。任何人有任何想法如何解决这个问题？

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