issuhub.com

Web Development with jQuery®

(Elliott) #1

Implementing a Datepicker (^) ❘ 393



content='application/xhtml+xml; charset=utf-8' />

Datepicker Plugin








Appointment Form



Calendar Icon





The date fi eld in the preceding markup is made into a Datepicker with the following JavaScript:
$(document).ready(
function()
{
$('input#exampleDate').datepicker({
changeMonth : true,
changeYear : true,
minDate : new Date(1900, 1, 1),
maxDate : new Date(2020, 12, 31),
yearRange : "1900:2020"
});
$('div.exampleDate img').click(
function()
{
$(this)
.prev('input')
.focus();
}
);
}
);
The preceding results are shown in Figure 16-3.
The preceding script sets up fi ve options for the Datepicker. The fi rst two options, changeMonth
and changeYear, toggle whether the month or year, respectively, are