您的位置：首页 > Web前端 > JQuery

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

2013-03-28 07:06 926 查看

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

1	<!doctypehtml>

2	< html lang = "en" >

head

4	< meta charset = "utf-8" />

5	< title >jQueryUIDemos</ 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"

});

});

16	</ script >

</

head

body

20	< p >Date:< input type = "text" id = "datepicker" /></ p >

</

body

</

html

可以看到小于当天的日期变灰且无法选择。设置日期范围可以使用两个DatePicker配合使用，用户可以选择一个开始日期和一个终止日期。

1	<!doctypehtml>

2	< html lang = "en" >

head

4	< meta charset = "utf-8" />

5	< title >jQueryUIDemos</ 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);

});

19	$("#to").datepicker({

20	defaultDate:"+1w",

21	changeMonth:true,

22	numberOfMonths:3,

23	onClose:function(selectedDate){

24	$("#from").datepicker("option","maxDate",selectedDate);

});

});

28	</ script >

</

head

body

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" />

</

body

</

html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航