×
Namespaces

Variants
Actions

How to use the Datepicker plugin in JQuery

From Nokia Developer Wiki
Jump to: navigation, search
Article Metadata
Article
Created: Maveric (26 Jun 2012)
Last edited: hamishwillee (13 Aug 2012)

This article explains how to use the Datepicker plugin in JQuery.


Introduction

The jQuery UI Datepicker is a highly configurable plugin that adds datepicker (widget) functionality to you web page. You can customize the date format and language, restrict the selectable date ranges and add in buttons and other navigation options easily. By default, the datepicker calendar opens in a small overlay onFocus and closes automatically onBlur or when a date is selected. For an inline calendar, simply attach the datepicker to a div or span.

The datepicker is widely used, e.g. in all online reservation systems make use of this or a similar picker.

Example code

For this example we will first create a standard form text input field, which will then be tied to the Datepicker. The text input field will be length of 8 characters, as the date value will fit there just perfectly. The input field will work so, that when the user clicks the input field, the datepicker component pops up. When a specific day of month is clicked within the component, that date will be transferred to the date input field. And when the user clicks outside the area of the text field, the datepicker component will disappear.

Datepicker date is always automatically updated. Example use is with a form on a webpage, to pick a date to be sent with the other form data. The default format is mm/dd/yyyy, but it can be easily changed using the dateFormat option. For example we can use dd/mm/yy instead of mm/dd/yyyy. This is necessary for localization purposes usually. We could also use format like 11-11-2011 or with hyphens or spaces, slashes.

Note: You will need to download the JQuery package and install it, then modify the paths for JQuery components in the code below, if you used some other directory.

The files we are using for this example are: index.html (HTML page), style.css for the styling and main.js for the JavaScript code.

HTML page index.html:

<!doctype html>
<html lang = "en>
<head>
<meta charset="utf-8">
<title>jQuery Date Picker example</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<input id="date" type="text" size="10" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<body>
</html>


Code stylesheet file style.css:

body {
font-size: 12px;
}

We will append the datepicker to the text field in the form (date). When the field is clicked, the datepicker will appear and when the user clicks away from it the datepicker will disappear.

main.js

When instatiating the datepicker we do not need to implement anything inside the curly brackets the way we usually would. This will already bring the needed functionality.

$('#date').datepicker({  });

In case we would like the user to be able to choose from betwen a minimum and a maximum date, e.g. or allow only from on the current date we would need to implement the minDate. All online reservation systems usually implement this with the maxDate to set also the last selectable date for a period, that would become visible.

These values can be combined with + and - e.g. the following way to add or subtract days.

$('#date'), datepicker({dateFormat: 'dd/mm/yy', minDate: '-5d', maxDate: '+1, +2d',
showButtonPanel: true })

The showButtonPanel brings visible a bottom panel to the datepicker with commands Today and done, of which the latter one simply closes the datepicker. The datepicker can be customized further with using showAnim type default is showAnim, the value of which is "show" by default.

$('#date'), datepicker({dateFormat: 'dd/mm/yy', minDate: '-5d', maxDate: '+1, +2d',
showButtonPanel: true, showAnim: 'fadeIn' });


Summary

Datepicker is an easy to use jQuery plugin that offers a neat way to display a calendar that the user can pick any date from.

This page was last modified on 13 August 2012, at 07:12.
115 page views in the last 30 days.
×