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>  
 

效果图:

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" />  
 

 效果图:

 

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>  

  效果图:


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>  
 

效果图:


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
目录
相关文章
|
6月前
easyui datebox 设置只读
easyui datebox 设置只读
|
JavaScript
jquery easyui datebox 时间控件默认显示当前日期的实现方法
jquery easyui datebox 时间控件默认显示当前日期的实现方法 直接class easyui-datebox后添加一个value="true"就可以
1801 0
|
前端开发 JavaScript
EasyUI DateBox 按钮自定义添加功能
DateBox Buttons - jQuery EasyUI Demo DateBox Buttons This example shows how to customize the datebox buttons underneath the calendar.
1320 0
|
JavaScript UED 前端开发
easyUI——datebox验证和自定义取消按钮
来源:http://blog.csdn.net/liusong0605/article/details/42270463 1. datebox验证        验证结束时间 start;               return varify;           },           message : '结束时间要大于开始时间!'       }   });   2. 自定义清除按钮       datebox默认设置了currentText、closeText、okText。
1283 0
|
JavaScript 前端开发 索引
EasyUI修改DateBox和DateTimeBox的默认日期格式
        最近整理Easyui控件的时候,对Easyui的DateBox控件和DateTimeBox控件进行了梳理,而我之所以将EasyUI的DateBox控件和DateTimeBox控件放在一起,归为一类,是因为这两个控件没有什么区别,如果你非得说这两个控件有区别,也无非是DateTimeBox控件后面除了基本的年月日之外带上了小时或者分钟或者秒什么的,更何况,这两个控件在进行日期格式化时所采用的方法也是一样的。
2261 0
|
JavaScript API
jQuery EasyUI API 中文文档 - 日期框(DateBox)
DateBox 日期框 扩展自 $.fn.combo.defaults。用 $.fn.datebox.defaults 重写了 defaults。 依赖 combo calendar 用法 1. 1. $('#dd').datebox({   2.     required:true 3. });  特性 其特性扩展自 combo,下列是为 datebox 增加的特性。
1005 0