JQuery UI: Datepicker Tutorial
Datepicker Tutorial
JQuery Datepicker is widely used in any modern web that needs a date as the input value. This Datepicker will make sure that the user inputs the correct format date (it can be 20/01/1990, 20 January 1990, January 20 1900 and so on) to avoid any error.
Example of Basic Datepicker 
<html> <head> <script type="text/javascript" src="js/jquery-1.10.2.js"></script> <script type="text/javascript" src="js/jquery-ui-1.10.4.custom.min.js"></script> <link rel="stylesheet" type="text/css" href="css/jquery-ui-1.10.4.custom.css" /> <link rel="stylesheet" type="text/css" href="css/jquery-ui-1.10.4.custom.min.css"/> <script type="text/javascript"> $(document).ready(function(){ $("#bdate").datepicker(); }); </script> </head> <body> <form method="post" action=""> Date of Birth : <input type="text" name="bdate" id="bdate"/> </form> </body> </html>

Live Demo
Date of Birth :
Download this example
Example of Datepicker with Month and Year Change quickely 
Basic datepicker will be difficult for everyone to change the year and the month to their birth day as they have to scroll right or left continuously. So what is the solution?, easy enough. Just add 2 Options of the datepicker that are changeMonth:true and changeYear:true.
<html> <head> <script type="text/javascript" src="js/jquery-1.10.2.js"></script> <script type="text/javascript" src="js/jquery-ui-1.10.4.custom.min.js"></script> <link rel="stylesheet" type="text/css" href="css/jquery-ui-1.10.4.custom.css" /> <link rel="stylesheet" type="text/css" href="css/jquery-ui-1.10.4.custom.min.css"/> <script type="text/javascript"> $(document).ready(function(){ $("#bdate").datepicker({ changeMonth:true, changeYear:true }); }); </script> </head> <body> <form method="post" action=""> Date of Birth : <input type="text" name="bdate" id="bdate"/> </form> </body> </html>

Live Demo
Date of Birth :
Download this example
Example of Datepicker and change range of Year  
Above datepicker year range only has 10 years back and 10 years next from current year. If you want to change the year range, you need to add yearRange: "-100:+0" option
<html> <head> <script type="text/javascript" src="js/jquery-1.10.2.js"></script> <script type="text/javascript" src="js/jquery-ui-1.10.4.custom.min.js"></script> <link rel="stylesheet" type="text/css" href="css/jquery-ui-1.10.4.custom.css" /> <link rel="stylesheet" type="text/css" href="css/jquery-ui-1.10.4.custom.min.css"/> <script type="text/javascript"> $(document).ready(function(){ $("#bdate").datepicker({ changeMonth:true, changeYear:true, yearRange:"-100:+10" }); }); </script> </head> <body> <form method="post" action=""> Date of Birth : <input type="text" name="bdate" id="bdate"/> </form> </body> </html>

Live Demo
Date of Birth :
Download this example

Example of Datepicker and change date format 
Here is the example of dateFormat , As you already know, not all countries use the same date format. So we as the developers have to fit it. If you want to change the dateFormat , you need to add dateFormat:"dd MM yy" option
<html> <head> <script type="text/javascript" src="js/jquery-1.10.2.js"></script> <script type="text/javascript" src="js/jquery-ui-1.10.4.custom.min.js"></script> <link rel="stylesheet" type="text/css" href="css/jquery-ui-1.10.4.custom.css" /> <link rel="stylesheet" type="text/css" href="css/jquery-ui-1.10.4.custom.min.css"/> <script type="text/javascript"> $(document).ready(function(){ $("#bdate").datepicker({ changeMonth:true, changeYear:true, yearRange:"-100:+10", dateFormat:"dd MM yy" }); }); </script> </head> <body> <form method="post" action=""> Date of Birth : <input type="text" name="bdate" id="bdate"/> </form> </body> </html>

Live Demo
Date of Birth :
Download this example

 



 

Latest Tutorial


Most Visited Tutorial