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中文本地化
<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 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>
效果图