Datepicker
jQuery UI offers a sophisticated and feature-rich UI component for inputting dates into a form
fi eld in its Datepicker plugin. The jQuery UI Datepicker plugin provides a graphical calendar
that can be set to pop up anywhere you might need a date keyed into a form. The calendar
can be customized in its look and feel. The date format it produces can be set to mirror local
customs. The text it labels fi elds with can be swapped out with whatever text you like or trans-
lated into a foreign language, making the plugin fully capable of localization.This chapter describes how to use and customize the Datepicker plugin.
Implementing a Datepicker
A barebones implementation of the Datepicker plugin doesn’t look like much; it’s not styled,
but it works, more or less, from the standpoint of functionality.The following document, which can be downloaded from http://www.wrox.com/go/webdevwithjquery
as Example 16-1, demonstrates a basic implementation of the jQuery UI Datepicker plugin:<!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>
<script src='../jQuery.js'></script>
<script src='../jQueryUI.js'></script>
<script src='Example 16-1.js'></script>
<link href='Example 16-1.css' rel='stylesheet' />
</head>
<body>
<form action='javascript:void(0);' method='post'>
<fieldset>
<legend>Appointment Form</legend>
<div class="exampleDate">
<label for="exampleDate">Date:</label>