Formatting Content

The datepicker () method changes the appearance of HTML elements on a page by adding new CSS classes.

Figure 8-2 shows an example of HTML generated by jQuery UI once the datepicker () instruction modifies the HTML (the code was recovered using the Firebug extension in Firefox).

HTML code generated by the datepicker () method

Figure 8-2. HTML code generated by the datepicker () method

The input field is slightly modified by adding the hasDatepicker CSS class, but a <div> element (having the ui-datepicker-div CSS class) corresponding to the calendar is also inserted into the HTML. This <div> element will be displayed or hidden depending on whether the user wants to see the calendar or not.

The structure of the HTML is simple: in addition to the corresponding global <div> calendar, it has a first <div> containing the first line of the calendar (the title for the month and year, with two buttons for arrows for the month), then a table with the names of the day (<thead> tag) and the corresponding days (<tbody> tag).

It is possible to use CSS classes for HTML elements to customize the display. For example, if we change the ui-datepicker-header CSS class associated with <div> elements and the ui-datepicker-calendar class associated with <table> elements, we get a new appearance for the calendar (see Figure 8-3). These classes are changed in the HTML by adding a <style> tag:

<script src = jquery.js></script> <script src = ...

Get jQuery UI now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.