Our today topics is "How to add a jQuery date picker to input field".
First of all write a HTML code as bellow.
<!DOCTYPE html>Now add the jQuery code to the header area. We will add date picker based on the input field id. Here we have an input field and its id is datepicker. So our script will as bellow.
<html>
<head>
<title>Adding Date Picker to input field</title>
<!-- Loading jQuery UI Style -->
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<!-- Loading jQuery Library JS -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<!-- Loading jQuery UI JS -->
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
</head>
<body>
<div>
<input type="text" id="datepicker" name="date"/>
</div>
</body>
</html>
<script type="text/javascript">And the final code -
$(document).ready(function(){
$('#datepicker').datepicker({
changeMonth: true,// This option allow user to change month on top bar
changeYear:true// This option allow user to change year on top bar of date picker
});
});
</script>
<!DOCTYPE html>
<html>
<head>
<title>Adding Date Picker to input field</title>
<!-- Loading jQuery UI Style -->
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<!-- Loading jQuery Library JS -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<!-- Loading jQuery UI JS -->
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#datepicker').datepicker({
changeMonth: true,// This option allow user to change month on top bar
changeYear:true// This option allow user to change year on top bar of date picker
});
});
</script>
</head>
<body>
<div>
<input type="text" id="datepicker" name="date"/>
</div>
</body>
</html>
Thanks for sharing the valuable information.
ReplyDeleteFull Stack Online Training
Full Stack Training
Full Stack Developer Online Training
nice article but know more click https://www.bizboostup.com/product/buy-google-reviews
ReplyDelete
ReplyDeleteit is a great article. i hope i will get more information from here,i have followed
a webisite, you can also go
Anti Intrusion Services in canada
for know
more
Great Info, Thanks For Sharing , keep it up we are here to learn more
ReplyDeleteGreat! I like to share it with all my friends and hope they will also like this information.
ADF Training In Hyderabad
ADF Online Training
ADF Training
ADF Training In Ameerpet
ADF Training Online