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