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>
可以看到小于当天的日期变灰且无法选择。
设置日期范围
可以使用两个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>
补充：web前端 , JavaScript ,
