Web Development with jQuery®

(Elliott) #1

(^384) ❘ CHAPTER 16 DATEPICKER



Calendar Icon





The following style sheet provides a little bit of styling for the preceding markup document:
body {
font: 12px 'Lucida Grande', Arial, sans-serif;
background: #fff;
color: rgb(50, 50, 50);
}
fieldset {
border: none;
}
input {
background: lightblue;
}
div.exampleDate img {
vertical-align: -5px;
}
In the following script, the datepicker() method is called on the element in the markup
document, which causes a calendar to dynamically pop up for date selection whenever the
element receives focus:
$(document).ready(
function()
{
$('input#exampleDate').datepicker();
}
);
As you can see in Figure 16-1, the Datepicker plugin provides an unstyled calendar provided each
time the fi eld it is associated with is activated.

FIGURE 16-1


http://www.it-ebooks.info

Free download pdf