如何使用jQuery-UI datepicker获取表单输入字段以使用来自其他字段的年份？

Question

我有一张表格，其中包含用户的出生日期。使用日期选择器弹出窗口来获取年，月和日期的问题在于它可能需要花费数年的时间，因为界面只是逐月出现。

因此，当前的解决方案是使用HTML5 number字段为年份设置一个字段，因此用户可以轻松滚动年份，然后使用另一个字段使用datepicker弹出窗口来选择月份和天。人们似乎喜欢用日历弹出窗口选择日期。

在我的表格中，用户可以分别选择年份和月份/日期，这一切都很好。 datepicker默认显示当前年份的月份和日期，但从某种意义上说，这并不重要。我们不需要记录任何一个日期的星期几，因此，如果他们选择1月27日，例如2014年，即使他们的出生年份是1980年，也无所谓。我们在帖子数据中得到的是1980和01-27，我们将其合并到1980-01-27，然后将其存储在数据库中。

即使它正在工作，我还是迂腐，而且即使用户可能已经进入了不同的一年，也会让我显示今年的日历。所以，我想要做的是使日期选择器中的年份更改为匹配年份字段中的年份。

我被卡住了，因为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'
    });
});

生成的Datepicker对话框