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 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 ...

Get Web Development with jQuery now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial