元博客地址:http://www.jeasyui.net/plugins/173.html
1、基本用法
代码:
- <html xmlns="http://www.w3.org/1999/xhtml">
- <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>
或:
- <html xmlns="http://www.w3.org/1999/xhtml"><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>
- </head>
- <body>
- <input id="txtDate" type="text" class="easyui-datebox" />
- </body>
- </html>
效果图:
2、显示时间
代码:
- <script type="text/javascript">
- $(function () {
- $("#txtDate").datetimebox();
- });
- </script>
或
- <input id="txtDate" type="text" class="easyui-datetimebox" />
效果图:
3、本地化
代码:
- <html xmlns="http://www.w3.org/1999/xhtml">
- <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、属性设置
代码:
- <html xmlns="http://www.w3.org/1999/xhtml">
- <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><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>
- </head>
- <body>
- <input id="txtDate" type="text" />
- </body>
- </html>
或
- <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、启用/禁用
代码:
- <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