(^392) ❘ CHAPTER 16 DATEPICKER
FIGURE 16-2
In the preceding example, you learned how to style the default Datepicker widget without using a
premade jQuery UI theme, which would otherwise style the widget for you. Other aspects of the
Datepicker concerning which dates you are allowed to pick from, how dates are formatted, and
which controls are present in the widget may also be customized. You learn more about these things
in the “Localizing the Datepicker” section later in this chapter.To style the Datepicker, you can reference the markup provided, using the various id and class
names to create styling for the pop-up calendar.The styles provided are nothing extraordinary, just run-of-the-mill CSS. In the following sections,
you take a look at how to further customize the Datepicker widget.Setting the Range of Allowed Dates
By default, the jQuery UI Datepicker plugin allows you to select from a range of dates that goes
10 years into the future and 10 years into the past. You can customize the range of dates that are
allowed by the widget, however, by specifying the range via options that you set upon calling the
datepicker() method:➤ (^) minDate and maxDate set the minimum and maximum possible dates a user can enter into the
date fi eld. These options are set by providing a JavaScript Date object.
➤ (^) changeMonth and changeYear are both boolean options that toggle regardless of whether the
month and year are drop-down menus, which allow the user to jump to a particular date
more quickly.
➤ (^) yearRange sets the range of years made available in the year drop-down menu. This option
is a string with the beginning and end year separated by a colon. For example, "1900:2000"
would populate a drop-down menu with every year from 1900 to 2000.
The following example is a demonstration of the preceding options and is available in the source
materials as Example 16-3.html, and it uses a style sheet based on the example provided in Example
16 -2 .css.
<!DOCTYPE HTML>
[http://www.it-ebooks.info](http://www.it-ebooks.info)