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.
