首页 > 程序开发 > web前端 > JavaScript >

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

2013-04-03

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

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

相关文章
最新文章
热点推荐