jQuery 入门教程(32): jQuery UI Datepicker 示例(五)

设置可以选择的日期范围
有时希望用户在给定的日期内选择,比如预约会议的时间,只能在当天开始的一个月带10天以内。这时可以通过配置minDate和maxDate 来设置,如果minDate或maxDate 没有配置,表示没有最小日期或最大日期的限制。

1 <!doctype html>
2 <html lang="en">
3 <head>
4     <meta charset="utf-8" />
5     <title>jQuery UI Demos</title>
6     <link rel="stylesheet" href="themes/trontastic/jquery-ui.css" />
7     <script src="scripts/jquery-1.9.1.js"></script>
8     <script src="scripts/jquery-ui-1.10.1.custom.js"></script>
9    <script>
10        $(function () {
11            $("#datepicker").datepicker({
12                minDate: 0,
13                maxDate: "+1M +10D"
14            });
15        });
16   </script>
17 </head>
18 <body>
19   
20 <p>Date: <input type="text" id="datepicker" /></p>
21   
22 </body>
23 </html>

jQuery 入门教程(32): jQuery UI Datepicker 示例(五)_第1张图片

可以看到小于当天的日期变灰且无法选择。

设置日期范围

可以使用两个DatePicker配合使用,用户可以选择一个开始日期和一个终止日期。

1 <!doctype html>
2 <html lang="en">
3 <head>
4     <meta charset="utf-8" />
5     <title>jQuery UI Demos</title>
6     <link rel="stylesheet" href="themes/trontastic/jquery-ui.css" />
7     <script src="scripts/jquery-1.9.1.js"></script>
8     <script src="scripts/jquery-ui-1.10.1.custom.js"></script>
9     <script>
10         $(function () {
11             $("#from").datepicker({
12                 defaultDate: "+1w",
13                 changeMonth: true,
14                 numberOfMonths: 3,
15                 onClose: function (selectedDate) {
16                     $("#to").datepicker("option", "minDate", selectedDate);
17                 }
18             });
19             $("#to").datepicker({
20                 defaultDate: "+1w",
21                 changeMonth: true,
22                 numberOfMonths: 3,
23                 onClose: function (selectedDate) {
24                     $("#from").datepicker("option", "maxDate", selectedDate);
25                 }
26             });
27         });
28     </script>
29 </head>
30 <body>
31  
32     <label for="from">From</label>
33     <input type="text" id="from" name="from" />
34     <label for="to">to</label>
35     <input type="text" id="to" name="to" />
36  
37 </body>
38 </html>

jQuery 入门教程(32): jQuery UI Datepicker 示例(五)_第2张图片

 

你可能感兴趣的:(jQuery 入门教程(32): jQuery UI Datepicker 示例(五))