Make sure to insert the JQuery library file. Make sure to insert the datedropper JS file and datedropper CSS stylesheet file. Make sure to insert input tag and set "text" to the "type" property. Last step to Initialize datedropper script.



Lets see the complete example to select date from date picker.





Lets see the complete

example-1.html

<!doctype html> <html> <head> <!-- custom css --> <link href = "datedropper.css" rel = "stylesheet" type = "text/css" /> <!-- jQuery lib --> <script src = "jquery.min.js" ></script> <!-- dateDropper lib --> <script src = "datedropper.js" ></script> <style> input { display : inline ; width : 30 %; padding : 10px ; margin : 15px ; border : solid 1px #BDC7D8; margin - bottom : 20px ; } input {} </style> </head> <body> <div style = " width : 500px ; margin : 0px auto ; " > <!-- tag element --> Select Your Date : <input type = "text" data-large-mode = "true" data-translate-mode = "true" data-auto-lang = "true" readonly = "" > <!-- init dateDropper --> <script> $ ( 'input' ). dateDropper (); </script> </div> </body> </html>





Output :







example-2.html

<!doctype html> <html> <head> <!-- custom css --> <link href = "datedropper.css" rel = "stylesheet" type = "text/css" /> <!-- jQuery lib --> <script src = "jquery.min.js" ></script> <!-- dateDropper lib --> <script src = "datedropper.js" ></script> <style> input { display : inline ; width : 20 %; padding : 10px ; margin : 15px ; border : solid 1px #BDC7D8; margin - bottom : 20px ; } input {} </style> </head> <body> <div style = " width : 500px ; margin : 0px auto ; " > <h1> Credit Card Expiry Date. </h1> <br> <!-- tag element --> <input type = "text" data-format = "m" data-translate-mode = "true" data-id = "datedropper-1" readonly = "" > <input type = "text" data-format = "Y" data-translate-mode = "true" data-id = "datedropper-1" readonly = "" > <!-- init dateDropper --> <script> $ ( 'input' ). dateDropper (); </script> </div> </body> </html>



Output :







Other Customization options are as follow :



Set the Default Date :

<input type = "text" data-default-date = "11-13-2016" />





Disable the Dates in Date Picker :

<input type = "text" data-disabled-days = "12/13/2016,12/14/2016,12/15/2016" />





Set the Date Picker Language :

<!- english --> <input type = "text" data-lang = "en" /> <!- Italian --> <input type = "text" data-lang = "it" /> <!- Arabic --> <input type = "text" data-lang = "ar" /> <!- Greek --> <input type = "text" data-lang = "gr" />



Set Max Year :

<input type = "text" data-max-year = "2030" />



Set Min Year :

<input type = "text" data-min-year = "1994" />





Please do follow the below Link to learn about this date picker :

http://felicegattuso.com/projects/datedropper/





This is all about Jquery UI date picker.

Hope you like this tutorial and in case of any issue please do comment in comment box below.





Download Link :

https://github.com/skptricks/php-Tutorials/tree/master/Jquery%20date%20picker













In this tutorial we are going to discuss. This is a smallest and powerful, which provide lots of functionalities and very easy to use and integrate in web based application.Lets get started and follow the below steps :