Chapter 16Datepicker

jQuery UI offers a sophisticated and feature-rich UI component for inputting dates into a form field 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 fields with can be swapped out with whatever text you like or translated 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 as Example 16-1, demonstrates a basic implementation of the jQuery UI Datepicker plugin:

<html xmlns=''>
        <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' />
        <form action='javascript:void(0);' method='post'>
                <legend>Appointment ...

Get Web Development with jQuery now with O’Reilly online learning.

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