Examples of Using Datepickers

This section includes some practical examples of using datepickers.

Displaying a Calendar in Another Language

To display a calendar in another language (as shown in Figure 8-4), simply include the JavaScript file associated with that language. This file is located in the jqueryui/development-bundle/ui/i18n directory, such as the jqueryui/development-bundle/ui/i18n/jquery.ui.datepicker-fr.js file for the French language:

<script src = jquery.js></script>
<script src = jqueryui/js/jquery-ui-1.8.16.custom.min.js></script>
<script src=jqueryui/development-bundle/ui/i18n/jquery.ui.datepicker-fr.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>
Calendar in French

Figure 8-4. Calendar in French

Displaying Multiple Months in the Calendar

Several months can be displayed in the calendar (Figure 8-5). For this, we use options.numberOfMonths, which indicates the desired number of months or an array [x, y] that contains the number of rows (x) and columns (y) that represent these months.

Use the following (in bold) to display a calendar of four months (two rows of two, shown in Figure 8-5):

<script src=jquery.js></script> <script src=jqueryui/development-bundle/ui/jquery-ui-1.8.4.custom.js></script> <script src=jqueryui/development-bundle/ui/i18n/jquery.ui.datepicker-fr.js> ...

Get jQuery UI now with O’Reilly online learning.

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