easyui datebox的用法

easyui datebox的用法

一、DateBox效果图

二、DateTimeBox效果图

三、DateBox属性

其属性扩展自combo,下列是为databox增加的属性

名称 类型 说明 默认值
panelWidth number 下拉日历面板的宽度 180
panelHeight number 下拉日历面板的高度 auto
currentText string 当前日期按钮上显示的文字 Today
closeText string 关闭按钮上显示的文字 Close
okText string 确定按钮上显示的文字 OK
disabled boolean 为true时禁用该域 false
formatter function 格式化日期的函数,此函数有一个'date'参数,并返回一个字符串值  
parser function 解析日期字符串的函数,此函数有一个'date'字符串参数,并返回一个日期值  

四、DateBox事件

名称 参数 说明
onSelect date 当用户选择一个日期时触发

五、DateBox方法

其方法扩展自combo,下列是为datebox重定的方法

名称 参数 说明
options none 返回options对象
calender none 获取calender对象
setValue value 设置databox值

六、基本用法

1、DateBox

 $(function () {  

           $("#txtDate").datebox();  

        });  

或者

 <input id="txtDate" type="text" class="easyui-datebox" />  

2、DateTimeBox

    $(function () {  

        $("#txtDate").datetimebox();  

    });  

或者

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

七、datebox中文本地化

  •  
  • HTML 代码   复制
  • 
       <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>  
     
        <input id="txtDate" type="text" />  
    
    		
  • 效果图

    八、datebox属性设置实例

  •  
  • 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>&nbsp;
    </head>
    <body>
        <input id="txtDate" type="text" />
    </body>
    </html>
    
    		
  • 效果图

       

    标签: