JQuery Datepicker無年問題與minDate和maxDate集

Question

我有一個JQuery日期選擇器，可以讓你選擇日期和月份。這一年是隱藏的。

除了當我將minDate和maxDate添加到日期選擇器設置時，所有工作都很好。

我之所以設定這個，是因爲他們不能改變幾年，我也希望它允許閏年。因此，我將最小和最大日期設置爲2012年（最後閏年），以便他們可以選擇2月29日。

當我點擊日期文本框時，它會在12月31日選中，即使4月23日是設置日期。只要我刪除minDate和maxDate它會選擇4月23日，當我選擇日期文本框。

• JSFiddle（與minDate和maxDate）
• JSFiddle（不minDate和maxDate）

這是一個bug或者是有什麼我可以做，以糾正這種？

我的代碼：

$('#date').datepicker({ 
    altField: '#date_alt', 
    altFormat: 'mm-dd', 
    changeMonth: true, 
    changeYear: false, 
    dateFormat: 'MM d', 
    showAnim: 'slideDown', 
    yearRange: '-100:+0', 
    minDate: new Date(2012, 1-1, 1), 
    maxDate: new Date(2012, 12-1, 31), 
    beforeShow: function(el, obj) { 
     obj.dpDiv.addClass('datepicker_hideyear'); 
    }, 
    onClose: function(el, obj){ 
     setTimeout(function() { obj.dpDiv.removeClass('datepicker_hideyear'); }, 1000); 
    } 
}); 

---

UPDATE：

設置defaultDate到2012年的日期的伎倆，但沒有設置日期選擇器的值。它僅載入2012年4月23日和默認日期。

defaultDate: new Date('04/23/2012'), 

我必須使用setDate爲「選擇」 2012年4月23日和一套是價值，但它具有完全相同的結果結束。

$('#date').datepicker('setDate', new Date('04/23/2012')); 

JSFiddle。

Answer 1

問題是，您沒有指定將值添加到輸入中的年份。由於今年不在你的範圍內，因此它默認爲可能的最大日期。

從您的輸入中刪除值並添加默認的日期將會使這項工作正常：

<input type="text" name="date" id="date" /> 

，並在你的日期選擇器初始化加：

defaultDate: new Date(2012, 4-1, 23), 

更挖掘一下之後，看起來這是jQueryUI的一個錯誤。如果你不這樣做。在dateformat st中指定年份格式無論如何，它將默認爲當年。這就是setdate失敗的原因。

這裏雖然解決方法：updated fiddle

這是我加入

<div style="position:relative; display: inline-block;"> 
    <input type="text" id="date-placeholder" value="" /> 
    <input type="text" name="date" id="date" value="" style="visibility:hidden; position:absolute; left:0;" /> 
</div> 

這基本上是創建用於顯示信息給用戶的佔位符。 「#date」輸入被設置爲可見性：隱藏並絕對定位在佔位符上（以使日期選擇器彈出它應該在的位置）。我沒有設置顯示：沒有，因爲datepicker將無法工作，但jQuery仍然認爲可見性：隱藏是可見的，所以它仍然有效。

然後在JavaScript中，我建立一個新的事件：

$("#date-placeholder").click(function() { 
    $("#date").datepicker("show"); 
}); 

這只是手動顯示日期選擇器，當用戶點擊文本框。然後，在日期選擇器的OnClose事件：

onClose: function (el, obj) { 
      setTimeout(function() { 
       obj.dpDiv.removeClass('datepicker_hideyear'); 
      }, 1000); 
      var val = $("#date").val(); 
      val = val.substr(0, val.length - 4); 
      $("#date-placeholder").val(val); 
     } 

簡單的獲取日期字段的當前值，並移除最後4個字符（年份），並設置佔位符該值。

您還必須在初始化時更改dateFormat字符串。這是爲了控制正確設置一年。

dateFormat: 'MM d yy', 

該代碼可以修復，但看看小提琴，你會看到它是如何工作的。

Answer 2

而不是使用輸入值，你不能使用datepicker方法的defaultDate屬性？

$('#date').datepicker({ 
    defaultDate: new Date('04/23/2012'); 
    altField: '#date_alt', 
    altFormat: 'mm-dd', 
    changeMonth: true, 
    changeYear: false, 
    dateFormat: 'MM d', 
    showAnim: 'slideDown', 
    yearRange: '-100:+0', 
    minDate: new Date(2012, 1-1, 1), 
    maxDate: new Date(2012, 12-1, 31), 
    beforeShow: function(el, obj) { 
     obj.dpDiv.addClass('datepicker_hideyear'); 
    }, 
    onClose: function(el, obj){ 
     setTimeout(function() { obj.dpDiv.removeClass('datepicker_hideyear'); }, 1000); 
    } 
});