jQuery UI Datepicker Widget - jQuery UI Tutorial 08
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
Nesta página do site você pode assistir ao vídeo on-line jQuery UI Datepicker Widget - jQuery UI Tutorial 08 duração hora minuto segundo em boa qualidade , que foi baixado pelo usuário ChidresTechTutorials 13 Outubro 2017, compartilhe o link com seus amigos e conhecidos, no youtube este vídeo já foi visto 2,901 vezes e gostou 48 espectadores. Boa visualização!
