O'Reilly logo

Beginning JavaScript® and CSS Development with jQuery by Richard York

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required