O'Reilly logo

jQuery UI by Eric Sarrion

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

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

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