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.
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>
sir please provided full calendar In which event add view update delete
Sure, I’ll post it soon.
Hi indra, can i ask for a dropzone.js tutorial as well ?
Thank you so much before