【转载】
jQueryEasyUI DateBox的基本使用
1、基本用法
代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<head runat=
"server"
>
<title>日期控件</title>
<link href=
"/jquery-easyui-1.2.4/themes/default/easyui.css"
rel=
"stylesheet"
type=
"text/css"
/>
<link href=
"/jquery-easyui-1.2.4/themes/icon.css"
rel=
"stylesheet"
type=
"text/css"
/>
<script src=
"/jquery-easyui-1.2.4/jquery-1.6.4.min.js"
type=
"text/javascript"
></script>
<script src=
"/jquery-easyui-1.2.4/jquery.easyui.min.js"
type=
"text/javascript"
></script>
<script type=
"text/javascript"
>
$(
function
() {
$(
"#txtDate"
).datebox();
});
</script>
</head>
<body>
<input id=
"txtDate"
type=
"text"
/>
</body>
</html>
|
或
1
2
3
4
5
6
7
8
9
10
11
|
<title>日期控件</title>
<link href=
"/jquery-easyui-1.2.4/themes/default/easyui.css"
rel=
"stylesheet"
type=
"text/css"
/>
<link href=
"/jquery-easyui-1.2.4/themes/icon.css"
rel=
"stylesheet"
type=
"text/css"
/>
<script src=
"/jquery-easyui-1.2.4/jquery-1.6.4.min.js"
type=
"text/javascript"
></script>
<script src=
"/jquery-easyui-1.2.4/jquery.easyui.min.js"
type=
"text/javascript"
></script>
</head>
<body>
<input id=
"txtDate"
type=
"text"
class
=
"easyui-datebox"
/>
</body>
</html>
|
效果图:
2、显示时间
代码:
1
2
3
4
5
|
<script type=
"text/javascript"
>
$(
function
() {
$(
"#txtDate"
).datetimebox();
});
</script>
|
或
1
|
<input id=
"txtDate"
type=
"text"
class
=
"easyui-datetimebox"
/>
|
效果图:
3、本地化
代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<head runat=
"server"
>
<title>日期控件</title>
<link href=
"/jquery-easyui-1.2.4/themes/default/easyui.css"
rel=
"stylesheet"
type=
"text/css"
/>
<link href=
"/jquery-easyui-1.2.4/themes/icon.css"
rel=
"stylesheet"
type=
"text/css"
/>
<script src=
"/jquery-1.6.4.min.js"
type=
"text/javascript"
></script>
<script src=
"/jquery-easyui-1.2.4/jquery-easyui-1.2.4/jquery.easyui.min.js"
type=
"text/javascript"
></script>
<script src=
"/jquery-easyui-1.2.4/locale/easyui-lang-zh_CN.js"
type=
"text/javascript"
></script>
<script type=
"text/javascript"
>
$(
function
() {
$(
"#txtDate"
).datebox();
});
</script>
</head>
<body>
<input id=
"txtDate"
type=
"text"
/>
</body>
</html>
|
效果图:
4、属性设置
代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<head runat=
"server"
>
<title>日期控件</title>
<link href=
"/jquery-easyui-1.2.4/themes/default/easyui.css"
rel=
"stylesheet"
type=
"text/css"
/>
<link href=
"/jquery-easyui-1.2.4/themes/icon.css"
rel=
"stylesheet"
type=
"text/css"
/>
<script src=
"/jquery-easyui-1.2.4/jquery-1.6.4.min.js"
type=
"text/javascript"
></script>
<script src=
"/jquery-easyui-1.2.4/jquery.easyui.min.js"
type=
"text/javascript"
></script>
<script src=
"/jquery-easyui-1.2.4/locale/easyui-lang-zh_CN.js"
type=
"text/javascript"
></script>
<script type=
"text/javascript"
>
$(
function
() {
$(
"#txtDate"
).datebox({
required:
"true"
,
missingMessage:
"必填项"
,
formatter:
function
(date) {
var
y = date.getFullYear();
var
m = date.getMonth() + 1;
var
d = date.getDate();
return
y +
"年"
+ (m < 10 ? (
"0"
+ m) : m) +
"月"
+ (d < 10 ? (
"0"
+ d) : d) +
"日"
;
}
});
});
</script>
</head>
<body>
<input id=
"txtDate"
type=
"text"
/>
</body>
</html>
|
或
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<script type=
"text/javascript"
>
$(
function
() {
var
options = {
required:
"true"
,
missingMessage:
"必填项"
,
formatter:
function
(date) {
var
y = date.getFullYear();
var
m = date.getMonth() + 1;
var
d = date.getDate();
return
y +
"年"
+ (m < 10 ? (
"0"
+ m) : m) +
"月"
+ (d < 10 ? (
"0"
+ d) : d) +
"日"
;
}
}
$(
"#txtDate"
).datebox(options);
});
</script>
|
效果图:
5、启用/禁用
代码:
1
2
3
4
5
6
7
|
<script type=
"text/javascript"
>
$(
function
() {
$(
"#txtDate"
).datebox({
disabled:
true
});
});
</script>
|
6、参数
属性名 | 类型 | 描述 | 默认值 |
currentText | 字符串 | 为当前日期按钮显示的文本 | Today |
closeText | 字符串 | 关闭按钮显示的文本 | Close |
disabled | 布尔 | 如果为true则禁用输入框 | false |
required | 布尔 | 定义输入框是否为必添 | false |
missingMessage | 字符串 | 当输入框为空时提示的文本 | 必填 |
formatter | function | 格式化日期的函数,这个函数以’date’为参数,并且返回一个字符串 | —— |
parser | function | 分析字符串的函数,这个函数以’date’为参数并返回一个日期 | —— |
7、事件
事件名 | 参数 | 描述 |
|
onSelect | date | 当选择一个日期时触发 |
|
分类:
jQueryEasyUI