jquery UI日期选择器日历和两个字段(备用)
jquery UI Datepicker calendar and two fields (alternate)
我尝试使用这个库:
http://jqueryui.com/datepicker/#alt-现场
我有这样的输入:
<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 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 2014</option>
<option value="2014-10">Oct 2014</option>
<option value="2014-11">Nov 2014</option>
<option value="2014-12">Dec 2014</option>
<option value="2015-1">Jan 2015</option>
<option value="2015-2">Feb 2015</option>
<option value="2015-3">Mar 2015</option>
<option value="2015-4">Apr 2015</option>
<option value="2015-5">May 2015</option>
<option value="2015-6">Jun 2015</option>
<option value="2015-7">Jul 2015</option>
<option value="2015-8">Aug 2015</option>
</select></div></div>
在这个库的帮助下,我如何在日历日期中进行选择,并以select options的格式输入select checkin_monthday day number和select checkin_yearmonth 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 />
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
相关文章:
- angular ui路由器卡在两个状态之间
- 用Angularjs返回两个承诺,How To Chain So UI有$scope
- 带有两个句柄的 jQuery UI 滑块 - 获取初始数据
- 我如何制作一个带有两个句柄的jquery ui滑块;“推”;彼此
- Kendo Grid UI水印列或一列的两个下拉列表
- 如何使用angular ui select过滤两个字段中的数据
- jQuery ui自动完成下拉列表中的两个字段
- 在 jquery UI 日期选取器中排除和禁用两个日期之间的差异中的假日
- 使用 chui.js $.当有两个列表时,UI 可访问
- jquery UI 两个可拖动对象冲突
- 获取两个 UI 滑块在其中一个更改时将值传递给 Ajax
- 如何在两个 jquery ui 选项卡中使用弹性滑块
- 这两个笨蛋有什么区别?(Angularjs, angular-ui).
- 同步两个角度 UI 引导轮播
- 如何在两个
之间共享数据?使用AngularJS和温泉UI - 将两个相同的参数发送到 ui-sref
- jQuery UI可调整两个对象的大小
- 同时显示两个jQuery UI工具提示
- AngularJs在同一页面中查看两个ui
- jquery UI日期选择器日历和两个字段(备用)