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.
