easyui datebox的用法

更多时间：2015-1-17 类别：Web前端浏览量：1923

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();

});

或者

2、DateTimeBox

$(function () {

$("#txtDate").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>

效果图

标签：easyui

上一篇：js event对象

下一篇：easyui combobox级联

您可能感兴趣

easyui datebox的用法

easyui datebox的用法

热门推荐

排行榜