--- /dev/null
+<!doctype html>\r
+<html lang="en">\r
+<head>\r
+ <title>jQuery UI Datepicker - Display multiple months</title>\r
+ <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />\r
+ <script type="text/javascript" src="../../jquery-1.3.2.js"></script>\r
+ <script type="text/javascript" src="../../ui/ui.core.js"></script>\r
+ <script type="text/javascript" src="../../ui/ui.datepicker.js"></script>\r
+ <link type="text/css" href="../demos.css" rel="stylesheet" />\r
+ <script type="text/javascript">\r
+ $(function() {\r
+ var dates = $('#from, #to').datepicker({\r
+ defaultDate: "+1w",\r
+ changeMonth: true,\r
+ numberOfMonths: 3,\r
+ onSelect: function(selectedDate) {\r
+ var option = this.id == "from" ? "minDate" : "maxDate";\r
+ dates.not(this).datepicker("option", option, new Date(selectedDate));\r
+ }\r
+ });\r
+ });\r
+ </script>\r
+</head>\r
+<body>\r
+\r
+<div class="demo">\r
+\r
+<label for="from">From</label>\r
+<input type="text" id="from" name="from"/>\r
+<label for="to">to</label>\r
+<input type="text" id="to" name="to"/>\r
+\r
+</div><!-- End demo -->\r
+\r
+<div class="demo-description">\r
+\r
+<p>Select the date range to search for.</p>\r
+\r
+</div><!-- End demo-description -->\r
+\r
+</body>\r
+</html>\r
<li><a href="dropdown-month-year.html">Display month & year menus</a></li>
<li><a href="multiple-calendars.html">Display multiple months</a></li>
<li><a href="icon-trigger.html">Icon trigger</a></li>
+ <li><a href="event-search.html">Event Search</a></li>
</ul>
</div>