third-party/jquery-ui-1.10.2/demos/datepicker/date-range.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>