Implementing a Datepicker (^) ❘ 385
Custom Styling the Datepicker
By default, the Datepicker plugin doesn’t provide styling. To style the Datepicker plugin, you can
either use a jQuery UI theme or style it manually. This section presents how to style the Datepicker
calendar manually. Before you can style the Datepicker widget, however, you need to understand
how the widget is structured. A comprehensive list of customization options and a list of class names
appear in Appendix O, “Datepicker.”In the following example, you examine the markup structure of the Datepicker plugin and apply
some CSS to it. This example is available in this book’s source code download materials available
at http://www.wrox.com in Example 16-2.html and Example 16-2.css. This example focuses only on the
markup and CSS portions of the Datepicker plugin and does not include any JavaScript. This is an
example of the markup the Datepicker plugin generates with default options selected. If you provide
custom options to the Datepicker plugin, you need to use something such as WebKit Inspector or
Firebug to examine the markup generated by the plugin for changes.<!DOCTYPE HTML>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv='content-type'
content='application/xhtml+xml; charset=utf-8' />
<meta http-equiv='content-language' content='en-us' />
<title>Datepicker Plugin</title>
<link href='Example 16-2.css' rel='stylesheet' />
</head>
<body>
<div id="ui-datepicker-div"
class="ui-datepicker
ui-widget
ui-widget-content
ui-helper-clearfix
ui-corner-all">
<div class="ui-datepicker-header
ui-widget-header
ui-helper-clearfix
ui-corner-all">
<a class="ui-datepicker-prev
ui-corner-all"
title="Prev">
<span class="ui-icon
ui-icon-circle-triangle-w">Prev</span>
</a>
<a class="ui-datepicker-next
ui-corner-all"
title="Next">
<span class="ui-icon
ui-icon-circle-triangle-e">Next</span>
</a>
<div class="ui-datepicker-title">
<select class="ui-datepicker-month">
<option value="0">Jan</option>
<option value="1">Feb</option>
<option value="2">Mar</option>
<option value="3" selected="selected">Apr</option>