How to link jQuery UI datepicker functionality with a select list
- by take2
I'm trying to connect jQuery UI's datepicker with a select list.
I have found one explanation on jQuery's Forum (
forum.jquery.com/topic/jquery-ui-datepicker-with-select-lists), but I can't get it working.
There are input and select list both declared:
<select id="selectMonth"><option value="01">Jan</option><option value="02">Feb</option>
<option value="03">Mar</option><option value="04">Apr</option>...</select>
<select id="selectDay"><option value="01">1</option><option value="02">2</option>
<option value="03">3</option><option value="04">4</option>...</select>
<select id="selectYear"><option value="2012">2012</option><option value="2013">2013</option>
<option value="2014">2014</option>...</select>
<p>Date: <input type="text" id="selectedDatepicker" /></p>
This is the script:
$(function() {
$('#selectedDatepicker').datepicker({
beforeShow: readSelected, onSelect: updateSelected,
minDate: new Date(2012, 1 - 1, 1), maxDate: new Date(2014, 12 - 1, 31),
showOn: 'both', buttonImageOnly: true, buttonImage: 'img/calendar.gif'});
// Prepare to show a date picker linked to three select controls
function readSelected() {
$('#selectedDatepicker').val($('#selectMonth').val() + '/' +
$('#selectDay').val() + '/' + $('#selectYear').val());
return {};
}
// Update three select controls to match a date picker selection
function updateSelected(date) {
$('#selectMonth').val(date.substring(0, 2));
$('#selectDay').val(date.substring(3, 5));
$('#selectYear').val(date.substring(6, 10));
}
});
And here is the fiddle: http://jsfiddle.net/xKXZm/
They are not connected properly, the only "connected behaviour" is that when you click on the input button, it picks up the value of the select list. On the other hand, the select list never picks up the value of the input nor will the input pick up the value of the select list until you click on it.
