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

来源：互联网发布：mac音量嘟嘟编辑：程序博客网时间：2024/06/05 20:34

设置可以选择的日期范围
有时希望用户在给定的日期内选择，比如预约会议的时间，只能在当天开始的一个月带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>

20130320002

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

设置日期范围

可以使用两个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>

20130320003