jQuery 入门教程(32): jQuery UI Datepicker 示例(五)
来源:互联网 发布:mac文明 编辑:程序博客网 时间:2024/06/06 09:12
设置可以选择的日期范围
有时希望用户在给定的日期内选择,比如预约会议的时间,只能在当天开始的一个月带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
>
0 0
- jQuery 入门教程(32): jQuery UI Datepicker 示例(五)
- jQuery 入门教程(32): jQuery UI Datepicker 示例(五)
- jQuery 入门教程(28): jQuery UI Datepicker 示例(一)
- jQuery 入门教程(29): jQuery UI Datepicker 示例(二)
- jQuery 入门教程(30): jQuery UI Datepicker 示例(三)
- jQuery 入门教程(31): jQuery UI Datepicker 示例(四)
- jQuery 入门教程(28): jQuery UI Datepicker 示例(一)
- jQuery 入门教程(29): jQuery UI Datepicker 示例(二)
- jQuery 入门教程(30): jQuery UI Datepicker 示例(三)
- jQuery 入门教程(31): jQuery UI Datepicker 示例(四)
- jquery ui(五)日期选择器 datepicker
- Javascript : jquery-ui datepicker 示例
- jQuery 入门教程(23): jQuery UI Autocomplete示例(一)
- jQuery 入门教程(24): jQuery UI Autocomplete示例(二)
- jQuery 入门教程(25): jQuery UI Autocomplete示例(三)
- jQuery 入门教程(26): jQuery UI Button示例(一)
- jQuery 入门教程(27): jQuery UI Button示例(二)
- jQuery 入门教程(33): jQuery UI Dialog 示例(一)
- jQuery 入门教程(30): jQuery UI Datepicker 示例(三)
- java 元数据
- jQuery 入门教程(31): jQuery UI Datepicker 示例(四)
- URL的返回方式 —— 三种结构
- [Java] 日期处理 01 SimpleDataFormat 学习
- jQuery 入门教程(32): jQuery UI Datepicker 示例(五)
- HttpServletRequest 和HttpServletResponse
- jQuery 入门教程(33): jQuery UI Dialog 示例(一)
- 理解矩阵(三)
- Python起步
- chapter 24 The Debug Library
- js判断数据类型
- jQuery 入门教程(34): jQuery UI Dialog 示例(二)
- ios cookie