jQuery provides a variety of Calendar Plugins that would allow you to integrate calendar features to your websites. These plugins are very easy to use and we can easily include these plugins in our web applications. In this post, we are going to discuss about one of the jQuery calendar plugins, jQuery UI Datepicker.
jQueryUI Datepicker
The jQueryUI Datepicker plugin allow us to select a date from a popup or an in-line calendar. This plugin provide several options to customize the date format, localize calendar, restrict date range, and select a date range and many more. I would like to get down to the details.
Contents
jQueryUI Datepicker Options
In this section, we will discuss about different options available to customize the jQueryUI Datepicker plugin. We have used many of these options in the jQueryUI Datepicker in Action section.
This table briefly describes all the available options in the jQueryUI Datepicker plugin.
Back To Top
jQueryUI Datepicker Methods
In this section, we will look into the jQueryUI Datepicker plugin methods and its syntax. These methods are very useful when you deal with the datepicker plugin.
jQueryUI Datepicker in Action
In this section we will try different examples to explore the uses of jQueryUI Datepicker plugin.
Default Functionality
The following example demonstrates the default functionality of jQueryUI Datepicker plugin. It does not take any parameters. The datepicker is attached to a standard input field. Click on the field to open calendar with default functionality. This will be closed after selecting a date or when it is out of focus or you can hit esc button to close it.
datepicker-default.html
<!doctype html>
<html>
<head>
<title>jQuery UI Datepicker - Default</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/ui-darkness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script>
$(function() {
$( "#date_picker" ).datepicker();
});
</script>
</head>
<body>
<p>Click Here to Enter the date : <input type="text" id="date_picker"></p>
</body>
</html>
You will see the following output if you click on the input field.
Datepicker with Animation
The following example demonstrates the jQuery datepicker plugin with animation. You can try animating the datepicker by selecting an option from the drop down and click on the input field shown in the example.
datepicker-anim.html
<!doctype html>
<html>
<head>
<title>jQuery UI Datepicker - Animation</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/ui-darkness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script>
$(function() {
$( "#date_picker" ).datepicker();
$( "#effects" ).change(function() {
$( "#date_picker" ).datepicker( "option", "showAnim", $( this ).val() );
});
});
</script>
</head>
<body>
<p>Select Animation:<br>
<select id="effects">
<option value="show">Show (default)</option>
<option value="bounce">Bounce</option>
<option value="slideDown">Slide down</option>
<option value="fadeIn">Fade in</option>
<option value="blind">Blind</option>
<option value="fold">Fold </option>
<option value="">None</option>
</select>
</p>
<p>Click Here to Enter Date: <input type="text" id="date_picker" size="25"></p>
</body>
</html>
You will see the following output if you click on the input field.
In-line Datepicker
The following example demonstrates the in-line jQuery datepicker plugin.
datepicker-inline.html
<!doctype html>
<html>
<head>
<title>jQuery UI Datepicker - Inline</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/ui-darkness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script>
$(function() {
$( "#date_picker" ).datepicker();
});
</script>
</head>
<body>
Date In-Line : <div id="date_picker"></div>
</body>
</html>
You will see the following output if you click on the input field.
Datepicker with Button
The following example demonstrates the jQuery datepicker with buttons. This plugin display a Today button to select today’s date and another button called Done to close the datepicker.
datepicker-button.html
<!doctype html>
<html>
<head>
<title>jQuery UI Datepicker - Button</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/ui-darkness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script>
$(function() {
$( "#date_picker" ).datepicker( {
showButtonPanel: true
});
});
</script>
</head>
<body>
<p>Click Here To Enter Date: <input type="text" id="date_picker"></p>
</body>
</html>
You will see the following output if you click on the input field.
Datepicker Icon
The following example demonstrates the datepicker with icon trigger. You can view the datepicker by clicking on the icon next to the input field.
datepicker-icon.html
<!doctype html>
<html>
<head>
<title>jQuery UI Datepicker - Icon</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/ui-darkness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script>
$(function() {
$( "#date_picker" ).datepicker({
showOn: "button",
buttonImage: "/images/calendar-icon.png",
buttonImageOnly: true,
buttonText: "Select date"
});
});
</script>
</head>
<body>
<p>Click on the Icon to Enter Date: <input type="text" id="date_picker"></p>
</body>
</html>
You will see the following output if you click on the icon next to the input field.
Format Date
The following example demonstrates the datepicker using dateFormat option in the JQueryUI Datepicker plugin. We have used dateFormat:"DD, d MM, yy" in this example. There are a number of dataFormat options available with this plugin.
datepicker-format.html
<!doctype html>
<html>
<head>
<title>jQuery UI Datepicker - Format</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/ui-darkness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script>
$(function() {
$( "#date_picker" ).datepicker({
appendText:"(Full - DD, d MM, yy)",
dateFormat:"DD, d MM, yy"
});
});
</script>
</head>
<body>
<p>Click Here To Enter Date: <input type="text" id="date_picker" size=30></p>
</body>
</html>
You will see the following output on your browser.
Select Date Range
The following example demonstrates the datepicker to select range of dates.
datepicker-selectRange.html
<!doctype html>
<html>
<head>
<title>jQuery UI Datepicker - Select Range</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/ui-darkness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script>
$(function() {
$( "#from" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
onClose: function( selectedDate ) {
$( "#to" ).datepicker( "option", "minDate", selectedDate );
}
});
$( "#to" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
onClose: function( selectedDate ) {
$( "#from" ).datepicker( "option", "maxDate", selectedDate );
}
});
});
</script>
</head>
<body>
<label for="from">From</label>
<input type="text" id="from" name="from">
<label for="to">To</label>
<input type="text" id="to" name="to">
</body>
</html>
You will see the following output on your browser.
Restrict Date Range
The following example demonstrates how to restrict the range of dates. We use minDate and maxDate options for this.
datepicker-restrictRange.html
<!doctype html>
<html>
<head>
<title>jQuery UI Datepicker – Restrict Range</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/ui-darkness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script>
$(function() {
$( "#date_picker" ).datepicker({
numberOfMonths: 3,minDate: -20, maxDate: "+1M +10D"
});
});
</script>
</head>
<body>
<p>Clik Here to Enter the Date: <input type="text" id="date_picker"></p>
</body>
</html>
You will see the following output on your browser.
Populate alternate field
The following example demonstrates how to populate an alternate field using the altField and altFormat options.
datepicker-alt.html
<!doctype html>
<html>
<head>
<title>jQuery UI Datepicker – Alt</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/ui-darkness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script>
$(function() {
$( "#date_picker" ).datepicker({
altField: "#alternate",
altFormat: "DD, d MM, yy"
});
});
</script>
</head>
<body>
<p>Click here To Enter Date: <input type="text" id="date_picker"> Alternate Date:<input type="text" id="alternate" size="30"></p>
</body>
</html>
You will see the following output on your browser.
Display Multiple Months
The following example demonstrates the datepicker with multiple months in a single datepicker. We can set the numberOfMonths option to an integer value greater than to display the multiple months in the datepicker.
datepicker-multiple.html
<!doctype html>
<html>
<head>
<title>jQuery UI Datepicker – Multiple Months</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/ui-darkness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script>
$(function() {
$( "#date_picker" ).datepicker({
numberOfMonths: 2
});
});
</script>
</head>
<body>
<p>Click Here To Enter the Date: <input type="text" id="date_picker"></p>
</body>
</html>
You will see the following output on your browser.
You can see all these HTML pages in action by visiting to below URL.
jQueryUI Datepicker Plugin Demos
That’s all for the jQueryUI Datepicker plugin. You will see more jQuery plugins in the coming posts.