--- /dev/null
+<!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.4.4.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() {
+ var dates = $( "#from, #to" ).datepicker({
+ defaultDate: "+1w",
+ changeMonth: true,
+ numberOfMonths: 3,
+ onSelect: function( selectedDate ) {
+ var option = this.id == "from" ? "minDate" : "maxDate",
+ instance = $( this ).data( "datepicker" );
+ date = $.datepicker.parseDate(
+ instance.settings.dateFormat ||
+ $.datepicker._defaults.dateFormat,
+ selectedDate, instance.settings );
+ dates.not( this ).datepicker( "option", option, date );
+ }
+ });
+ });
+ </script>
+</head>
+<body>
+
+<div class="demo">
+
+<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><!-- End demo -->
+
+
+
+<div class="demo-description">
+<p>Select the date range to search for.</p>
+</div><!-- End demo-description -->
+
+</body>
+</html>
+++ /dev/null
-<!DOCTYPE html>
-<html lang="en">
-<head>
- <meta charset="utf-8">
- <title>jQuery UI Datepicker - Display multiple months</title>
- <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
- <script src="../../jquery-1.4.4.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() {
- var dates = $( "#from, #to" ).datepicker({
- defaultDate: "+1w",
- changeMonth: true,
- numberOfMonths: 3,
- onSelect: function( selectedDate ) {
- var option = this.id == "from" ? "minDate" : "maxDate",
- instance = $( this ).data( "datepicker" );
- date = $.datepicker.parseDate(
- instance.settings.dateFormat ||
- $.datepicker._defaults.dateFormat,
- selectedDate, instance.settings );
- dates.not( this ).datepicker( "option", option, date );
- }
- });
- });
- </script>
-</head>
-<body>
-
-<div class="demo">
-
-<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><!-- End demo -->
-
-
-
-<div class="demo-description">
-<p>Select the date range to search for.</p>
-</div><!-- End demo-description -->
-
-</body>
-</html>
<li><a href="multiple-calendars.html">Display multiple months</a></li>
<li><a href="icon-trigger.html">Icon trigger</a></li>
<li><a href="animation.html">Animations</a></li>
- <li><a href="event-search.html">Event Search</a></li>
+ <li><a href="date-range.html">Date Range</a></li>
</ul>
</div>