javascript - jquery UI Datepicker 日历和两个字段(备用)

Question

我尝试使用这个库:

http://jqueryui.com/datepicker/#alt-field

我有这样的输入:

<div class="datepicker-wrap"><div class="selector fixedWidth" id="uniform-b_checkin_day"><span style="-webkit-user-select: none;">7</span><select name="checkin_monthday" id="b_checkin_day" class="hasDatepicker" onchange="checkDateOrder('b_frm', 'b_checkin_day', 'b_checkin_month', 'b_checkout_day', 'b_checkout_month');"><option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7" selected="selected">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select></div><div class="selector fixedWidth" id="uniform-b_checkin_month"><span style="-webkit-user-select: none;">Sept&nbsp;2014</span><select name="checkin_year_month" id="b_checkin_month" class="hasDatepicker" onchange="checkDateOrder('b_frm', 'b_checkin_day', 'b_checkin_month', 'b_checkout_day', 'b_checkout_month');"><option selected="selected" value="2014-9">Sept&nbsp;2014</option>
<option value="2014-10">Oct&nbsp;2014</option>
<option value="2014-11">Nov&nbsp;2014</option>
<option value="2014-12">Dec&nbsp;2014</option>
<option value="2015-1">Jan&nbsp;2015</option>
<option value="2015-2">Feb&nbsp;2015</option>
<option value="2015-3">Mar&nbsp;2015</option>
<option value="2015-4">Apr&nbsp;2015</option>
<option value="2015-5">May&nbsp;2015</option>
<option value="2015-6">Jun&nbsp;2015</option>
<option value="2015-7">Jul&nbsp;2015</option>
<option value="2015-8">Aug&nbsp;2015</option>
</select></div></div>

我如何在这个库的帮助下选择日历日期，并输入 select checkin_monthday 天数，并以我所拥有的选择选项的格式输入 select checkin_year_month 月份名称。

可以借助 jQuery UI 来完成吗？将特定格式的日历日期放入两个输入中？

Answer 1

HTML

<label for="checkin">Please select Check-In date</label>
<input type="text" class="datepicker" id="checkin" name="checkin" />
<br />
<label for="b_checkin_day">Check-In day</label>
<input type="text" id="b_checkin_day" name="b_checkin_day" readonly />
<br />
<label for="b_checkin_day">Check-In month and year</label>
<input type="text" id="b_checkin_month" name="b_checkin_month" readonly />

JavaScript

$(function () {
    $('#checkin').datepicker({
        buttonText: 'Choose a check-in day',
        buttonImage: 'images/calendar_icon.png',
        buttonImageOnly: false,
        dateFormat: 'mm/dd/yy',
        onSelect: function (dateText) {
            var objDate = new Date(dateText);
            var chkinDate = $.datepicker.formatDate('dd', objDate);
            var chkinMonth = $.datepicker.formatDate('M yy', objDate);
            $('#b_checkin_day').val(chkinDate);
            $('#b_checkin_month').val(chkinMonth);
        }
    });
});

JSFiddle