http://www.cnblogs.com/libingql/archive/2011/09/25/2189977.html
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 |
当选择一个日期时触发 |