Chapter 14. Datepicker

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, translated into a foreign language, or otherwise ... making the plugin fully capable of localization.

In this chapter, I describe 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 unstyled, but it works, more or less, from the standpoint of functionality.

The following document is a demonstration of what a basic implementation of the jQuery UI Datepicker plugin looks like:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'> <head> <meta http-equiv='content-type' content='text/html; charset=utf-8' /> <meta http-equiv='content-language' content='en-us' /> <title></title> <script type='text/javascript' src='../../../Source Code/jQuery/jQuery.js'></script> <script type='text/javascript' src='../../../Source Code/jQuery/jQueryUI.js'></script> <script type='text/javascript' src='Figure 14-1.js'></script> ...

Get Beginning JavaScript® and CSS 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.