EasyUI Datebox 日期框

元博客地址:http://www.jeasyui.net/plugins/173.html

1、基本用法

代码:

Html代码   收藏代码
  1. <html xmlns="http://www.w3.org/1999/xhtml">  
  2. <head runat="server">  
  3.     <title>日期控件</title>  
  4.     <link href="/jquery-easyui-1.2.4/themes/default/easyui.css" rel="stylesheet" type="text/css" />  
  5.     <link href="/jquery-easyui-1.2.4/themes/icon.css" rel="stylesheet" type="text/css" />  
  6.     <script src="/jquery-easyui-1.2.4/jquery-1.6.4.min.js" type="text/javascript"></script>  
  7.     <script src="/jquery-easyui-1.2.4/jquery.easyui.min.js" type="text/javascript"></script>  
  8.     <script type="text/javascript">  
  9.         $(function () {  
  10.             $("#txtDate").datebox();  
  11.         });  
  12.     </script>  
  13. </head>  
  14. <body>  
  15.     <input id="txtDate" type="text" />  
  16. </body>  
  17. </html>  

 或:

Html代码   收藏代码
  1. <html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">  
  2.     <title>日期控件</title>  
  3.     <link href="/jquery-easyui-1.2.4/themes/default/easyui.css" rel="stylesheet" type="text/css" />  
  4.     <link href="/jquery-easyui-1.2.4/themes/icon.css" rel="stylesheet" type="text/css" />  
  5.     <script src="/jquery-easyui-1.2.4/jquery-1.6.4.min.js" type="text/javascript"></script>  
  6.     <script src="/jquery-easyui-1.2.4/jquery.easyui.min.js" type="text/javascript"></script>  
  7. </head>  
  8. <body>  
  9.     <input id="txtDate" type="text" class="easyui-datebox" />  
  10. </body>  
  11. </html>  
 

效果图:

EasyUI Datebox 日期框_第1张图片

2、显示时间

代码:

Js代码   收藏代码
  1. <script type="text/javascript">  
  2.     $(function () {  
  3.         $("#txtDate").datetimebox();  
  4.     });  
  5. </script>  

 或

Js代码   收藏代码
  1. <input id="txtDate" type="text" class="easyui-datetimebox" />  
 

 效果图:

 EasyUI Datebox 日期框_第2张图片

3、本地化

 代码:

Html代码   收藏代码
  1. <html xmlns="http://www.w3.org/1999/xhtml">  
  2. <head runat="server">  
  3.     <title>日期控件</title>  
  4.     <link href="/jquery-easyui-1.2.4/themes/default/easyui.css" rel="stylesheet" type="text/css" />  
  5.     <link href="/jquery-easyui-1.2.4/themes/icon.css" rel="stylesheet" type="text/css" />  
  6.     <script src="/jquery-1.6.4.min.js" type="text/javascript"></script>  
  7.     <script src="/jquery-easyui-1.2.4/jquery-easyui-1.2.4/jquery.easyui.min.js" type="text/javascript"></script>  
  8.     <script src="/jquery-easyui-1.2.4/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>  
  9.     <script type="text/javascript">  
  10.         $(function () {  
  11.             $("#txtDate").datebox();  
  12.         });  
  13.     </script>  
  14. </head>  
  15. <body>  
  16.     <input id="txtDate" type="text" />  
  17. </body>  
  18. </html>  

  效果图:

EasyUI Datebox 日期框_第3张图片
4、属性设置

代码:

Html代码   收藏代码
  1. <html xmlns="http://www.w3.org/1999/xhtml">  
  2. <head runat="server">  
  3.     <title>日期控件</title>  
  4.     <link href="/jquery-easyui-1.2.4/themes/default/easyui.css" rel="stylesheet" type="text/css" />  
  5.     <link href="/jquery-easyui-1.2.4/themes/icon.css" rel="stylesheet" type="text/css" />  
  6.     <script src="/jquery-easyui-1.2.4/jquery-1.6.4.min.js" type="text/javascript"></script>  
  7.     <script src="/jquery-easyui-1.2.4/jquery.easyui.min.js" type="text/javascript"></script>  
  8.     <script src="/jquery-easyui-1.2.4/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>  
  9.     <script type="text/javascript">  
  10.         $(function () {  
  11.             $("#txtDate").datebox({  
  12.                 required: "true",  
  13.                 missingMessage: "必填项",  
  14.                 formatter: function (date) {  
  15.                     var y = date.getFullYear();  
  16.                     var m = date.getMonth() + 1;  
  17.                     var d = date.getDate();  
  18.                     return y + "年" + (m < 10 ? ("0" + m) : m) + "月" + (d < 10 ? ("0" + d) : d) + "日";  
  19.                 }  
  20.             });  
  21.         });  
  22.     </script><script type="text/javascript">  
  23.     $(function () {  
  24.         var options = {  
  25.             required: "true",  
  26.             missingMessage: "必填项",  
  27.             formatter: function (date) {  
  28.                 var y = date.getFullYear();  
  29.                 var m = date.getMonth() + 1;  
  30.                 var d = date.getDate();  
  31.                 return y + "年" + (m < 10 ? ("0" + m) : m) + "月" + (d < 10 ? ("0" + d) : d) + "日";  
  32.             }  
  33.         }  
  34.         $("#txtDate").datebox(options);  
  35.     });  
  36. </script>   
  37. </head>  
  38. <body>  
  39.     <input id="txtDate" type="text" />  
  40. </body>  
  41. </html>  

 或

Js代码   收藏代码
  1. <script type="text/javascript">  
  2.     $(function () {  
  3.         var options = {  
  4.             required: "true",  
  5.             missingMessage: "必填项",  
  6.             formatter: function (date) {  
  7.                 var y = date.getFullYear();  
  8.                 var m = date.getMonth() + 1;  
  9.                 var d = date.getDate();  
  10.                 return y + "年" + (m < 10 ? ("0" + m) : m) + "月" + (d < 10 ? ("0" + d) : d) + "日";  
  11.             }  
  12.         }  
  13.         $("#txtDate").datebox(options);  
  14.     });  
  15. </script>  
 

效果图:

EasyUI Datebox 日期框_第4张图片
5、启用/禁用

代码:

Js代码   收藏代码
  1. <script type="text/javascript">  
  2.     $(function () {  
  3.         $("#txtDate").datebox({  
  4.             disabled: true  
  5.         });  
  6.     });  
  7. </script>  
 

6、参数

属性名

类型

描述

默认值

currentText

字符串

为当前日期按钮显示的文本

Today

closeText

字符串

关闭按钮显示的文本

Close

disabled

布尔

如果为true则禁用输入框

false

required

布尔

定义输入框是否为必添

false

missingMessage

字符串

当输入框为空时提示的文本

必填

formatter

function

格式化日期的函数,这个函数以’date’为参数,并且返回一个字符串

——

parser

function

分析字符串的函数,这个函数以’date’为参数并返回一个日期

——

7、事件

事件名

参数

描述

 

onSelect

date

当选择一个日期时触发

 

分类:  jQueryEasyUI

你可能感兴趣的:(EasyUI Datebox 日期框)