元博客地址: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