如何告訴jQuery UI datepicker dateFormat不包含它的那一年？

Question

我正在嘗試創建兩個日期輸入並且不在日期字段中顯示年份。我希望格式更容易閱讀 - 所以「星期五，4月19日」而不是「2013/4/19」。我將更常規的格式存儲在同時更新的備用字段中。這工作正常，除了當我選擇在未來一年的日期，然後回去點擊相同的日期輸入。它會在當年加載一個日期。這是一些測試代碼，用於顯示情況以及我嘗試解決此問題的方法。

<form> 
    <input type="text" name="from" id="ff_from" class="date" value="" /> 
    <input type="text" name="to" id="ff_to" class="date" value="" /> 
    <div class="extra"> 
     <p>Formatted version of dates</p> 
     <input type="text" disabled id="ff_from_formatted" value="" /> 
     <input type="text" disabled id="ff_to_formatted" value="" /> 
    </div> 
</form> 

<script> 
// add n number of days 
Date.prototype.addDays = function(n) { 
    this.setDate(this.getDate()+n); 
    return this; 
}; 

$("#ff_from").datepicker({ 
    dateFormat: "D, M dd", 
    altField:$("#ff_from_formatted"), 
    altFormat: "yy/mm/dd", 
    minDate:0, 
    onClose:function(){ 
     $("#ff_to").focus(); 
    } 
}).change(function(){ 
    var fromDate=new Date($("#ff_from_formatted").val()); 
    var toDate=new Date($("#ff_to_formatted").val()); 
    minToDate=fromDate.addDays(1); 
    if (fromDate >= toDate) { 
     $("#ff_to").datepicker("setDate", minToDate); 
    } 
    $("#ff_to").datepicker("option","minDate", minToDate); 
}); 
$("#ff_to").datepicker({ 
    dateFormat: "D, M dd", 
    altField:$("#ff_to_formatted"), 
    altFormat: "yy/mm/dd", 
    minDate:+1 
}); 
</script> 

測試在這裏：http://jsfiddle.net/ZpfAB/9/

要重現該問題

1. 選擇是在2014年
2. 點擊輸入字段中再次第一個字段的日期。它會加載當前日期。

---

編輯：下面的最終解決方案是得益於@clav幫助 - 這涉及移除altFields並使用隱藏輸入字段來代替。我使用opacity：0而不是display：none，因爲當使用display：none時，我在ff_to字段出現奇怪的錯誤。

http://jsfiddle.net/ZpfAB/33/

<form> 
    <input type="text" id="ff_from_display" class="date"/> 
    <input type="text" name="from" id="ff_from" class="date" style="opacity:0;width:0;"/> 
    <input type="text" id="ff_to_display" class="date"/> 
    <input type="text" name="to" id="ff_to" class="date" style="opacity:0;width:0;" /> 
</form> 

<script> 
// add n number of days 
Date.prototype.addDays = function(n) { 
    this.setDate(this.getDate()+n); 
    return this; 
}; 

$('#ff_from_display').focus(function() { 
    $("#ff_from").datepicker('show'); 
}); 

$('#ff_to_display').focus(function() { 
    $("#ff_to").datepicker('show'); 
}); 

$("#ff_from").datepicker({ 
    dateFormat: "yy/mm/dd", 
    minDate:0, 
    onClose:function(){ 
     $("#ff_to_display").focus(); 
    } 
}).change(function(){ 
    var fromDate = $("#ff_from").datepicker('getDate'); 
    $('#ff_from_display').val($.datepicker.formatDate('D, M dd', fromDate)); 
    var toDate=new Date($("#ff_to_formatted").val()); 
    minToDate=fromDate.addDays(1); 
    if (fromDate >= toDate) { 
     $("#ff_to").datepicker("setDate", minToDate); 
    } 
    $("#ff_to").datepicker("option","minDate", minToDate); 
}); 

$("#ff_to").datepicker({ 
    dateFormat: "yy/mm/dd", 
    minDate:+1 
}).change(function(){ 
    var toDate = $("#ff_to").datepicker('getDate'); 
    $('#ff_to_display').val($.datepicker.formatDate('D, M dd', toDate)); 
}); 
</script> 

Answer 1

似乎有與日期選取器中的錯誤，即使日期是手動設置在beforeShow功能正確的日期，這一年仍顯示不正確。一種解決方法就是將格式設置爲包含年份的格式，然後隱藏日期選擇器輸入字段，創建不同的文本字段以顯示日期，並在用戶單擊「顯示」字段時顯示日期選擇器。然後在onClose回調中，您可以通過使用$.datepicker.formatDate('D, M dd', date)格式化所選日期來設置顯示字段的值。事情是這樣的：

<!-- new display field that will show the selected date in "D, M dd" format --> 
<input type="text" id="ff_display" class="date"/> 
<!-- hide the real datepicker text field --> 
<input type="text" name="from" id="ff_from" class="date" style="display: none;"/> 

// show the datepicker when the user clicks the visible "display" date field 
$('#ff_display').click(function() { 
    $("#ff_from").datepicker('show'); 
}); 

$("#ff_from").datepicker({ 
    dateFormat: "yy/mm/dd", // date format contains year so it won't get lost 
    gotoCurrent: true, 
    altField:$("#ff_from_formatted"), 
    altFormat: "yy/mm/dd", 
    onClose:function(){ 
     // get the selected date, put it in nice format and set value of display field 
     var date = $("#ff_from").datepicker('getDate'); 
     $('#ff_display').val($.datepicker.formatDate('D, M dd', date)); 
     $("#ff_to").focus(); 
    } 
.... rest of datepicker init code 

這裏有一個更新fiddle，我只是做了第一次約會，但你可以看到這個相同的邏輯是如何被應用到其他日期字段。