Tuesday, June 23, 2015

Adding a jQuery date picker to an input field


 jQuery

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>
<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>
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.

<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>
And the final code -

<!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> 

0 comments :

Post a Comment

 

Copyright @ 2014 Tech Tutorial .