Build jQuery UI Datepicker - Select a Date Range in JavaScript
Description
The following code shows how to build jQuery UI Datepicker - Select a Date Range.
Example
<!-- Revised from demo code on http://jqueryui.com/ -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Select a Date Range</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<!--from w w w . ja v a 2 s. c om-->
<script>
$(function() {
$( "#from" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
onClose: function( selectedDate ) {
$( "#to" ).datepicker( "option", "minDate", selectedDate );
}
});
$( "#to" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
onClose: function( selectedDate ) {
$( "#from" ).datepicker( "option", "maxDate", selectedDate );
}
});
});
</script>
</head>
<body>
<label for="from">From</label>
<input type="text" id="from" name="from"/>
<label for="to">to</label>
<input type="text" id="to" name="to"/>
<div class="demo-description">
<p>Select the date range to search for.</p>
</div>
</body>
</html>
The code above generates the following result.
Javascript Tutorial DatePicker
Build jQuery UI Datepicker - Animations in ...
Build jQuery UI Datepicker - Dates in other...
Build jQuery UI Datepicker - Default functi...
Build jQuery UI Datepicker - Display button...
Build jQuery UI Datepicker - Display inline...
Build jQuery UI Datepicker - Display month ...
Build jQuery UI Datepicker - Display multip...
Build jQuery UI Datepicker - Format date in...
Build jQuery UI Datepicker - Icon trigger i...
Build jQuery UI Datepicker - Populate alter...
Build jQuery UI Datepicker - Restrict date ...
Display two months in JavaScript
Set to use Monday as the first day of the w...
Use button to trigger date picker in JavaSc...
Build jQuery UI Datepicker - Animations in ...
Build jQuery UI Datepicker - Dates in other...
Build jQuery UI Datepicker - Default functi...
Build jQuery UI Datepicker - Display button...
Build jQuery UI Datepicker - Display inline...
Build jQuery UI Datepicker - Display month ...
Build jQuery UI Datepicker - Display multip...
Build jQuery UI Datepicker - Format date in...
Build jQuery UI Datepicker - Icon trigger i...
Build jQuery UI Datepicker - Populate alter...
Build jQuery UI Datepicker - Restrict date ...
Build jQuery UI Datepicker - Select a Date ...
Build jQuery UI Datepicker - Show week of t...Display two months in JavaScript
Set to use Monday as the first day of the w...
Use button to trigger date picker in JavaSc...