demos/datepicker/date-range.html

<!doctype html>
<html lang="en">
<head>
        <meta charset="utf-8">
        <title>jQuery UI Datepicker - Select a Date Range</title>
        <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
        <script src="../../jquery-1.9.1.js"></script>
        <script src="../../ui/jquery.ui.core.js"></script>
        <script src="../../ui/jquery.ui.widget.js"></script>
        <script src="../../ui/jquery.ui.datepicker.js"></script>
        <link rel="stylesheet" href="../demos.css">
        <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>
1	<!doctype html>
2	<html lang="en">
3	<head>
4	<meta charset="utf-8">
5	<title>jQuery UI Datepicker - Select a Date Range</title>
6	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
7	<script src="../../jquery-1.9.1.js"></script>
8	<script src="../../ui/jquery.ui.core.js"></script>
9	<script src="../../ui/jquery.ui.widget.js"></script>
10	<script src="../../ui/jquery.ui.datepicker.js"></script>
11	<link rel="stylesheet" href="../demos.css">
12	<script>
13	$(function() {
14	$( "#from" ).datepicker({
15	defaultDate: "+1w",
16	changeMonth: true,
17	numberOfMonths: 3,
18	onClose: function( selectedDate ) {
19	$( "#to" ).datepicker( "option", "minDate", selectedDate );
20	}
21	});
22	$( "#to" ).datepicker({
23	defaultDate: "+1w",
24	changeMonth: true,
25	numberOfMonths: 3,
26	onClose: function( selectedDate ) {
27	$( "#from" ).datepicker( "option", "maxDate", selectedDate );
28	}
29	});
30	});
31	</script>
32	</head>
33	<body>
34
35	<label for="from">From</label>
36	<input type="text" id="from" name="from"/>
37	<label for="to">to</label>
38	<input type="text" id="to" name="to"/>
39
40	<div class="demo-description">
41	<p>Select the date range to search for.</p>
42	</div>
43	</body>
44	</html>