jQuery UI Datepicker Widget - jQuery UI Tutorial 08

Published: 13 October 2017
on channel: ChidresTechTutorials

2,901

Notes for You:: jQuery UI Datepicker Widget - jQuery UI Tutorial 08
indicates a popup or inline calendar.

Creating Date picker Widget:
1. Create a new HTML document with basic HTML document structure code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Date picker Demo</title>
</head>
<body>
</body>
</html>

2. Link the necessary jQueryUI libray files to the HTML document
<link href="jquery-ui/jquery-ui.min.css" rel="stylesheet" type="text/css"/>
<script src="jquery-ui/external/jquery/jquery.js" type="text/javascript"></script>
<script src="jquery-ui/jquery-ui.min.js" type="text/javascript"></script>

3. Code the structure of the widget (i.e. HTML or markup):
To create a date picker widget; we need to create a text input or a div element
Note: If you create a div then the inline calendar gets attached, where as if you create text input field then the calendar gets pop up, whenever the text input field gets focus.

<div id="datepicker">Select date</div>
OR
<input type="text" id="datepicker2"/>

4. Select the element using jQuery and call the respective jQuery UI function on it
Select the element using jQuery selector and call datepicker jQuery UI function on it
<script type="text/javascript">
$("#datepicker").datepicker();
$("#datepicker2").datepicker();
</script>

Complete Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Date picker Demo</title>

<link href="jquery-ui/jquery-ui.min.css" rel="stylesheet" type="text/css"/>
<script src="jquery-ui/external/jquery/jquery.js" type="text/javascript"></script>
<script src="jquery-ui/jquery-ui.min.js" type="text/javascript"></script>

</head>
<body>
<div id="datepicker">
Select date
</div>

<br/>
<br/>
<input type="text" id="datepicker2"/>

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

Note:
replace < with less-than symbol.
replace > with greater-than symbol.

=========================================

Follow the link for next video:
jQuery UI Tutorial 09 - jQuery UI Progress Bar Tutorial
   • jQuery UI Progress Bar Widget - jQuer...

Follow the link for previous video:
jQuery UI Tutorial 07 - jQuery UI Tabs Tutorial
   • jQuery UI Tabs Widget - jQuery UI Tut...

=========================================

jQuery UI Tutorials Playlist:-
   • jQuery UI Tutorials

=========================================
Watch My Other Useful Tutorials:-

Bootstrap Tutorials Playlist:-
   • Bootstrap4 Tutorials

Dreamweaver Tutorials Playlist:-
   • Dreamweaver Tutorials

PHP Tutorials Playlist:-
   • PHP Tutorials

=========================================

► Subscribe to our YouTube channel:
   / chidrestechtutorials

► Visit our Website:
https://www.chidrestechtutorials.com

=========================================
Hash Tags:-
#ChidresTechTutorials #jQueryUI #jQueryUITutorial

On this page of the site you can watch the video online jQuery UI Datepicker Widget - jQuery UI Tutorial 08 with a duration of hours minute second in good quality, which was uploaded by the user ChidresTechTutorials 13 October 2017, share the link with friends and acquaintances, this video has already been watched 2,901 times on youtube and it was liked by 48 viewers. Enjoy your viewing!

287