如何使用jQuery-UI datepicker從另一個字段使用年份來獲取表單輸入字段？

Question

我有一個表格需要用戶的出生日期。使用日期選擇器彈出窗口來獲取年，月和日期的問題在於，它可能需要花費數年時間，因爲界面只能逐月進行。

因此，目前的解決方案是使用HTML5 number字段，一年中有一個字段，因此用戶可以輕鬆滾動瀏覽年份，然後有另一個字段使用日期選擇器彈出窗口來選擇月份和日期。人們似乎喜歡在日曆彈出窗口中選擇日期。

在我有的表單中，用戶可以單獨選擇年份和月份/日期，這一切都很好。 datepicker默認顯示當年的月份和日期，但從某種意義上說，這並不重要。我們不需要記錄任何一個日期的一週中的哪一天，因此，如果他們選擇1月27日，例如從2014年開始，即使他們的出生年份是1980年，也沒關係，因爲我們回來了什麼在發佈數據中是1980和01-27，我們將其合併到1980-01-27，並將其存儲在數據庫中。

即使它工作，我很迂腐，它讓我錯誤地顯示當年的日曆，即使用戶可能已經進入不同的一年。所以，我想要做的就是讓datepicker中的年份更改爲匹配年份字段中的年份。

我被卡住了，因爲datepicker的代碼對我來說有點模糊，而且我不確定如何使用year字段的值並應用它。我認爲我需要的是在年份字段中的一個onchange Javascript事件，但是我會應用什麼函數來使日期選擇器相應地調整？

JSFiddle is here。這是代碼：

<form> 
    <ul> 
     <li> 
      <label for="birthday">Date of birth</label> 
      <input name="birthyear" type="number" min="1920" max="2002" step="1" value="1980" class="number" required /> 
      <input name="birthday" type="date" id="birthday" placeholder="MM-DD" required /> 
     </li> 
    </ul> 
</form> 

    <script type="text/javascript"> 
if ($('#birthday')[0].type != 'date') $('#birthday').datepicker({ dateFormat: 'mm-dd' }); 
</script> 

Answer 1

這可能不是正是你想做什麼，但可以肯定的修復您具有其更改爲通過幾個月的時間來滾動努力實現正確的年份的問題一個下拉菜單。

Datepicker changeYear option

HTML

<form> 
    <ul> 
     <li> 
      <label for="birthday">Date of birth</label> 
      <input name="birthday" id="birthday" placeholder="mm/dd/yyyy" required /> 
     </li> 
    </ul> 
</form> 

JS

$(function() { 
    $('#birthday').datepicker({ 
     dateFormat:'mm/dd/yy', 
     changeYear:true, 
     yearRange:'c-80:c+0' 
    }); 
}); 

所得的日期選擇器對話框