Add datepicker to your website
Let users to select a date or pick a date from your input fields.Now add jquery date picker to your input fields in easy steps but first know the type of date pickers.
Type of date pickers
1. Basic datepicker
2. Datepicker having different format you can customise it according to your need in code.
3. Select year and date from seprate drop and down fields.
4. Ristrict past or future dates to users.
5. Range selection between two dates.
How to Use datepicker
Add the following -- jquery , jquery-ui.css, jquery-ui.js to your head section
<script src="http://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/black-tie/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/black-tie/jquery-ui.css">
Now add html input field to your html code in body section according to your need . In jquery datepicker will work on its unique id you can add as many datepicker as you want.
<input type="text" id="date1">
Now call the jquery function for datepicker
<script>
$(function(){
$("#date1").datepicker();
});
</script>
In this way you can add the date picker to your input fields .
For different type of datepickers you can add following line to your jquery code
$(function(){
$("#date2").datepicker({
dateFormat: "yy-mm-dd"
// for different date format
changeMonth: true, // add this if you want a month drop down
changeYear: true,
// add this if you want year drop down
minDate: 0, // add this date to start from the date
maxDate: "+1M +2D"
// add the days after which you want to restrict
});
});
For better understanding and working of datepicker you can copy paste following code to run and experiment with for different type of datepickers.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Datepicker</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
h2
{text-align:center;}
input[type="text"]
{
display: block;
margin : 0 auto;
}
</style>
<script>
$(function(){
$("#date1").datepicker();
});
$(function(){
$("#date2").datepicker({
dateFormat: "yy-mm-dd"
});
});
$(function(){
$("#date3").datepicker({
dateFormat: "yy-mm-dd",
changeMonth: true,
changeYear: true
});
});
$(function(){
$("#date4").datepicker({
dateFormat: "yy-mm-dd",
changeMonth: true,
changeYear: true,
minDate: 0,
maxDate: "+1M +2D"
});
});
$( function() {
var from = $( "#from" )
.datepicker({
dateFormat: "yy-mm-dd",
changeMonth: true,
changeYear: true,
})
.on( "change", function() {
to.datepicker( "option", "minDate", getDate( this ) );
}),
to = $( "#to" ).datepicker({
dateFormat: "yy-mm-dd",
changeMonth: true
})
.on( "change", function() {
from.datepicker( "option", "maxDate", getDate( this ) );
});
function getDate( element ) {
var date;
var dateFormat = "yy-mm-dd";
try {
date = $.datepicker.parseDate( dateFormat, element.value );
} catch( error ) {
date = null;
}
return date;
}
});
</script>
</head>
<body>
<h2>Basic datepicker</h2>
<p><input type="text" id="date1"></p>
<h2>Date format change</h2>
<p><input type="text" id="date2"></p>
<h2>Month and Year selection in datepicker</h2>
<p><input type="text" id="date3"></p>
<h2>Ristrict date in datepicker</h2>
<p><input type="text" id="date4"></p>
<h2>Select a range of date between two dates</h2>
<p><input type="text" id="from"> <input type="text" id="to"></p>
</body>
</html>
No comments:
Post a Comment