Javascript jquery UI日期选择器日历和两个字段（可选）

我尝试使用此库：

我有这样的投入：

<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>

71
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
2014年9月2014年9月
2014年10月
2014年11月
2014年12月
2015年1月
2015年2月
2015年3月
2015年4月
2015年5月
2015年6月
2015年7月
2015年8月

在这个库的帮助下，我如何在日历日期中进行选择，并以选择选项的格式输入选择签入\u monthday day day number和选择签入\u year\u month month name，我已经有了这些选项

这可以在jQuery UI的帮助下完成吗？将特定格式的日历日期设置为两个输入？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 />

---

在那里你可以看到我的日历。。。但为什么当我更改日期时，只有在我选择日期后才会在输入中显示？对不起，我不明白

$(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);
        }
    });
});