jQuery Datepicker

Datepicker is an wonderful option provided with user interface to facilitate user to select date in correct format. In this article, we are going to add datepicker to a webpage, using jQuery plugin.

jQuery Datepicker plugin is provided with various set of options and methods, that are used to customize datepicker user interface and the calendar widget.

Let us, have an example, to see how to add this plugin to provide datepicker user interface to a webpage. With this example, first we are going to display calendar in default manner without using any customization with the help of the options and methods provided.

date_picker_ui

For adding jQuery datepicker, we need to go with the following steps.

  • Add require javascript library files as usual as we have done with other jQuery event handler, like, Drag/Drop, Show/Hide and etc., to access jQuery methods and options required./li>
  • Link webpage with external CSS that contains styles for calendar theme.
  • Invoke datepicker event handlers to show calendar widget to be popup.
<html>
<head>
<title>JQuery DatePicker</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function() {
$( "#txtDate" ).datepicker();
});
</script>
</head>
<body>
<div>Select Date: <input type="text" id="txtDate" /></div>
</body>
</html>

In the above code, we have added the required Javascript libraries as the source of accessing jQuery built-in functions. For that, we can refer these libraries either by using direct URL that requires internet or we can made a local copy of these files by downloading latest version from jQuery official website.

After that, the datepicker() is invoked with the reference of HTML input element id. So, by default, the input element is the target, where the selected date will be displayed, and also, used to trigger event to popup calendar widget.

If we want to have two elements seperately, for triggering datepicker event and for populating response, we need to go with the available jQuery datepicker plaugin options and methods.

Datepicker Options Methods in jQuery

There are several options and methods provided by jQuery Datepicker plugin. For example, the following list contains some of this jQuery plugin options that are used to customize datepicker settings.

jquey_datepicker

Options

  • buttonImage – This option contains the path or name of an image to be shown, on clicking what the calendar widget will be popup.
  • buttonImageOnly – This datepicker option is to show only the image without any button effect around it.
  • buttonText – This option is like alt attribute of a HTML <img> tag, which is used to show alternate text given, if there is any problem on showing image to the browser.
  • showOn – It can contain values like focus, button and both to popup calendar widget with respective event occurrences, like, on focusing target input field, on clicking button.
  • dateFormat – As we can guess easily for what this option is used, it is for giving required format of the selected date.
  • minDate, maxDate – It will show minimum and maximum number of dates that are able to select, respectively.

All options including those that are not specified in the above list, are used to apply changes with respect to a specific selector.

Let us have an example to work with datepicker some of options from the above list.

<html>
<head>
<title>JQuery DatePicker</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$( "#txtDate" ).datepicker({
showOn: "button",
buttonImage: "datepicker_icon.png",
buttonText: "Date Picker",
buttonImageOnly: true});
});
</script>
</head>
<body>
<div>Select Date: <input type="text" id="txtDate" /></div>
</body>
</html>

If you dont have such image as specified in above script, then, the value of buttonText option will be shown to the browser.

Methods

Datepicker methods are used to perform various functions including some familiar date functions, such as date getters and setters. Some of these functions are,

  • getDate – To get current date.
  • setDate – To set specified date that should be in current date format.
  • hide – To clear recently opened calendar display.
  • option – This function will be used as datepicker option getter or setter based on the argument it received. For example, if there is no argument while invoking this method then, it will return all available selector options as key, value pair. If we pass option name and value for it, then, the value will be set for the option name given.

Apart from the above list of function, this plugin also include some utility functions for performing operations like, clearing default datepicker settings, formatting date and so on.

For example, setDefaults() function is used to clear the default setting by specifying required options and values. And the code is,

<html>
<head>
<title>JQuery DatePicker</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$.datepicker.setDefaults({
showOn: "button",
buttonImage: "datepicker_icon.png",
buttonText: "Date Picker",
buttonImageOnly: true  
});
$(function() {
$( "#txtFromDate" ).datepicker();
});
</script>
</head>
<body>
<div>From Date: <input type="text" id="txtFromDate" />
</div>
</div>
</body>
</html>

Using this setDeafults() function, we can apply options once for all datepicker instance available in our website.

Download jQuery Datepicker Source Code

This jQuery code tutorial was published on July 26, 2013.

↑ Back to Top