In this tutorial we are going to discuss Jquery UI Datepicker. This is a smallest and powerful jQuery UI datepicker, which provide lots of functionalities and very easy to use and integrate in web based application.
Lets get started and follow the below steps :
Lets see the complete example to select data from date picker.
Output :
Other Customization options are as follow :
Set the Default Date :
Set Max Year :
Set Min Year :
Lets get started and follow the below steps :
- 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 data from date picker.
example-1.html
href="datedropper.css" rel="stylesheet" type="text/css" />
src="jquery.min.js">
src="datedropper.js">
Input {
display: inline;
width: 30%;
padding: 10px;
margin: 15px;
border: solid 1px #BDC7D8;
margin-bottom: 20px;
}
input {}
style="width:500px;margin: 0px auto;">
Select Your Date :
type="text" data-large-mode="true" data-translate-mode="true" data-auto-lang="true" readonly="">
$('input').dateDropper();
Output :
example-2.html
href="datedropper.css" rel="stylesheet" type="text/css" />
src="jquery.min.js">
src="datedropper.js">
input {
display: inline;
width: 20%;
padding: 10px;
margin: 15px;
border: solid 1px #BDC7D8;
margin-bottom: 20px;
}
input {}
style="width:500px;margin: 0px auto;">
Credit Card Expiry Date.
type="text" data-format="m" data-translate-mode="true" data-id="datedropper-1" readonly="">
type="text" data-format="Y" data-translate-mode="true" data-id="datedropper-1" readonly="">
$('input').dateDropper();
Output :
Other Customization options are as follow :
Set the Default Date :
type="text" data-default-date="11-13-2016" />Disable the Dates in Date Picker :
type="text" data-disabled-days="12/13/2016,12/14/2016,12/15/2016" />Set the Date Picker Language :
type="text" data-lang="en" />
type="text" data-lang="it" />
type="text" data-lang="ar" />
type="text" data-lang="gr" />
Set Max Year :
type="text" data-max-year="2030" />Set Min Year :
type="text" data-min-year="1994" />Please do follow the below Link to learn about this date picker :
http://felicegattuso.com/projects/datedropper/
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
https://github.com/skptricks/php-Tutorials/tree/master/Jquery%20date%20picker
