如何使用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' 
    }); 
}); 

所得的日期选择器对话框