Adding a jQuery date picker to an input field

Mahabubur Rahman
4
 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> 

Post a Comment

4Comments

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

    ReplyDelete
  2. Great Info, Thanks For Sharing , keep it up we are here to learn more

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

    ReplyDelete
Post a Comment