jQuery UI Datepicker

The jQuery UI datepicker is one of the easiest widget to implement in a web page. It is a part of the jQuery UI family of widgets, which was first launched on September 2007.

To begin, download the latest stable version of jQuery UI from the official site here.

jquery ui

Extract the downloaded ZIP file.

jquery ui folder

You actually need to pick just two main files from the extracted folder for the datepicker to work: jquery-ui.css and jquery-ui.js. We create two directories for them /css and /js: we put jquery-ui.css file inside the /css directory and the jquery-ui.js file inside the /js directory. And the other essential asset is the images directory which is to be copied wholly and placed inside the /css directory for the next and previous icons to appear.

Here is the code for a very simplistic implementation of the jQuery UI Datepicker. 

				
				<!DOCTYPE html>
				<html lang="en">
				<head>
					<title>jQuery Datepicker</title>	
					<link rel="stylesheet" href="./css/jquery-ui.css"/>
					<script type="text/javascript" 
						src="//code.jquery.com/jquery-latest.min.js"></script>
					<script src="./js/jquery-ui.js"></script>					
				</head>
				<body>
				    <input id="date" type="text"/> 

				    <script type="text/javascript">
				    	$(document).ready(function(){
							$("#date").datepicker();
						});
				    </script>
				</body>
				</html>

If you click on the input element, the datepicker pops up!

jquery ui datepicker

In the below sections, we will look into some of the common customizations which developers usually make of the datepicker widget.

Setting a Date

Usually, the date input field is not left blank; some default date is often set as a placeholder. If you want to set the current date (today) as the default date, here is the code for it: 

					
					$(document).ready(function(){
						$("#date").datepicker();
						$("#date").datepicker("setDate", new Date());
					});

The current day appears in the mm/dd/yyyy format.

jquery ui datepicker current date

Now if there is a particular date you need to set, say April 5, 2063 (when mankind is officially supposed to make first contact with an alien species), here is the code: 

					
					$(document).ready(function(){
						$("#date").datepicker();
						$("#date").datepicker("setDate", new Date(2063,3,5));
					});

Date Formats

Not everyone follows the default mm/dd/yyyy US date format. Most form designs with datepickers suggest the use of a much readable format or the format familiar in the targeted audience. The dateFormat field allows you to change that.

For example, if instead of the forward slashes, you would want to use dashes - with the day appearing first before month, use the following format: 

					
					$("#date").datepicker({
						dateFormat: 'dd-mm-yy'
					});

This would present the date in the format 27-07-2019.

The below format will present the date as 27 Jul, 2019 

					
					$("#date").datepicker({
						dateFormat: 'd M, yy'
					});

And if you need the full name of the month, use 

					
					$("#date").datepicker({
						dateFormat: 'd MM, yy'
					});

It will present the date in the format: 27 July, 2019.

The jQuery UI official site maintains a list of the various date formats here:

https://jqueryui.com/resources/demos/datepicker/date-formats.html

Disabling Dates

Now sometimes we need the jQuery datepicker to disable dates before today or some specific date. For example, in a typical appointment form, you would want to disable picking all the past dates in the datepicker before today.

To disable the previous dates before the current date, make use of the minDate field and set it as follows 

					
			    	$(document).ready(function(){
						$("#date").datepicker({
							dateFormat: 'd M, yy',
							minDate: new Date()
						});
						$("#date").datepicker("setDate", new Date());
					});

Now when the datepicker pops up, all previous dates will be disabled as follows

jquery ui datepicker disable past dates

And if there is a a need to disable all future dates, use the maxDate field and configure it as follows 

					
			    	$(document).ready(function(){
						$("#date").datepicker({
							dateFormat: 'd M, yy',
							maxDate: new Date()
						});
						$("#date").datepicker("setDate", new Date());
					});

Notes