EasyUI Datebox 日期框-阿里云开发者社区

EasyUI Datebox 日期框

2015-12-23 2393

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

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

1、基本用法

代码：

   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>   
     <script type="text/javascript">   
         $(function () {   
             $("#txtDate").datebox();   
         });   
     </script>   
 </head>   
 <body>   
     <input id="txtDate" type="text" />   
 </body>   
 </html>   

或：

   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、显示时间

代码：

   Js代码  
    
  
 <script type="text/javascript">   
     $(function () {   
         $("#txtDate").datetimebox();   
     });   
 </script>   

或

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

效果图：

3、本地化

代码：

   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-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代码  
    
  
 <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>   

或

   Js代码  
    
  
 <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、启用/禁用

代码：

   Js代码  
    
  
 <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

EasyUI Datebox 日期框

热门文章

最新文章

相关电子书