CODEWITHSUNDEEP
javascriptjqueryjquery-uicalendardatepicker
byCoder
byCoder

Reputation: 9184

jquery UI Datepicker calendar and two fields (alternate)

I try to use this library:

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

and i have such inputs:

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

how could i with the help of this library choose in the calendar date, and put in select checkin_monthday day number, and in select checkin_year_month month name in format of select options, which i have.

Could it be done with the help of jQuery UI ? put from calendar date in specific format to two inputs?

Upvotes: 0

Views: 716

Answers (1)

DevlshOne
DevlshOne

Reputation: 8457

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

Upvotes: 1

Related Questions