Datepicker Tutorial

Datepickers allows users to add the specific date by visualizing an interactive calendar. The jQueryUI provides different users interface interactions, effects, widgets, 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 Custom Download button which will redirect you to the another page providing a range of options. Since this tutorial is about date picker plugin so select the date picker in the widget section and download them. After you have downloaded, go the project folder and create a folder namely jquery-ui and paste those files into that folder. Go back to project folder and create a file i.e. index.php. The working folders should look like 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 design part and in the body section, we will link the jquery-ui to initialize the date picker function. Secondly, 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 then 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

3 thoughts on “Datepicker Tutorial

Leave a Reply

Your email address will not be published. Required fields are marked *