jQuery UI

Chapter 8. Datepickers

Datepickers allow users to enter dates easily and visually, taking into account the various linguistic constraints in different countries (names of days and months, date format).

Basic Principles of Datepickers

Suppose we want to write the HTML code to display the calendar shown in Figure 8-1. This calendar appears when users click in the input field for entering a date. Months can scroll with the arrows in the top right and left of the calendar, and if you select one day it fits in the input field.

Figure 8-1. A calendar in the HTML page

Here’s how to write the HTML code according to the conventions of jQuery UI, including the datepicker () method called in the <script> tag.

We use an <input> element with the date identifier, which is the entry field of the date. In this case, the calendar will automatically be positioned below the input field when a user clicks it. The calendar will be hidden when users click outside or choose a date (the date will then be displayed in the input field):

<script src = jquery.js></script>
<script src = jqueryui/js/jquery-ui-1.8.16.custom.min.js></script>

<link rel=stylesheet type=text/css
      href=jqueryui/css/smoothness/jquery-ui-1.8.16.custom.css />

<h3>Click to select a date :</h3>
<input id=date />

<script>

$("input#date").datepicker ();

</script>

If we use a <div> or <span> instead of an <input> element, the calendar is displayed ...