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