JSFiddle - React, Tailwind, and code Playground
HTML
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" />
</head>
<body>
<select id="selectDay">
<option value="01">1</option>
<option value="02">2</option>
<option value="03">3</option>
<option value="04">4</option>
<option value="05">5</option>
<option value="06">6</option>
<option value="07">7</option>
<option value="08">8</option>
<option value="09">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>
<select id="selectYear">
<option value="2013-01">January 2013</option>
<option value="2013-02">February 2013</option>
<option value="2013-03">March 2013</option>
<option value="2013-04">April 2013</option>
<option value="2013-05">May 2013</option>
<option value="2013-06">June 2013</option>
</select>
<p>Date: <input type="text" id="selectedDatepicker" /></p>
</body>
JavaScript
$(function() {
$('#selectedDatepicker').datepicker({
dateFormat: "yy-mm-dd",
beforeShow: readSelected, onSelect: updateSelected,
minDate: new Date(2013, 1 - 1, 1), maxDate: new Date(2013, 06 - 1, 31),
numberOfMonths: 3,
showButtonPanel: true,
showOn: 'both', buttonImageOnly: true, buttonImage: 'http://jqueryui.com/resources/demos/datepicker/images/calendar.gif'});
// Prepare to show a date picker linked to three select controls
function readSelected() {
$('#selectedDatepicker').val($('#selectYear').val() + '-' +
$('#selectDay').val());
return {};
}
// Update three select controls to match a date picker selection
function updateSelected() {
var date1 = $(this).val();
console.log(date1.substring(8));
console.log(date1.substring(0, 4));
$('#selectDay').val(date1.substring(8));
$('#selectYear').val(date1.substring(0, 7));
}
$('select').change(readSelected);
});