Datepicker Tutorial

Date pickers allow users to add a specific date by visualizing an interactive calendar. The jQueryUI provides different user interface interactions, effects, widgets, and themes, and the perfect choice to build a highly interactive web application or add a date picker to a form control.

Table of Content

Setting up the project folder

In this part, we’ll download the plugin from jqueryui.com. Click on the Custom Download button which will redirect you to another page providing a range of options. Since this tutorial is about the date picker plugin so select the date picker in the widget section and download them. After you have downloaded it, go to the project folder and create a folder namely jquery-ui and paste those files into that folder. Go back to the project folder and create a file i.e. index.php. The working folders should look like the below image if you have followed the steps correctly.

datepicker

Index Page

Firstly in the head section, we will link the jquery-ui stylesheet for the design part, and in the body section, we will link the jquery-ui to initialize the date picker function. Secondly, the jquery js script should declare before the jquery-ui script to work the jquery ui file. Lastly, we’ll create the text input field and give them an id attribute name as a date.


<!DOCTYPE html>
<html>
<head>
	<title></title>

	<!-- datepicker style css -->
	<link rel="stylesheet" type="text/css" href="jquery-ui/jquery-ui.min.css">

</head>
<body>

Date : <input type="text" id="date">

<!-- jquery -->
<script type="text/javascript" src="jquery-ui/external/jquery/jquery.js"></script>
<!-- jquery ui -->
<script type="text/javascript" src="jquery-ui/jquery-ui.min.js"></script>

</body>
</html>

Initialize the Date Picker

In this section, it is the easiest way to invoke the date picker function. All you have to do is call the date picker function after the jquery link script. To do this, we will call the input id attribute name and invoke the date picker function.


<!DOCTYPE html>
<html>
<head>
	<title></title>

	<!-- datepicker style css -->
	<link rel="stylesheet" type="text/css" href="jquery-ui/jquery-ui.min.css">

</head>
<body>

Date : <input type="text" id="date">

<!-- jquery -->
<script type="text/javascript" src="jquery-ui/external/jquery/jquery.js"></script>
<!-- jquery ui -->
<script type="text/javascript" src="jquery-ui/jquery-ui.min.js"></script>

<script type="text/javascript">
	$("#date").datepicker();
</script>

</body>
</html>

Source Code

Download