easyui datebox的用法
类别:Web前端 浏览量:1923
时间:2015-1-17 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>
效果图
标签:easyui
您可能感兴趣
- EasyUI DateBox设置默认值
- easyui messager的用法
- easyui combogrid分页
- easyui layout 自适应
- easyui中使用编辑器在IE下有时无法获取焦点
- easyUI DataGrid 显示可排序的列
- EasyUI DataGird动态生成列
- easyui combobox级联
- easyui layout 折叠后显示标题
- easyui datebox的用法
- 刘韬涛丁子贺小品《根治低头族》台词剧本(刘韬涛丁子贺小品根治低头族台词剧本)
- 看完《夺冠》,黄渤的演技我实在夸不起来,彭昱畅反令人惊喜(黄渤的演技我实在夸不起来)
- 黄渤泪目 我的痴呆父亲,我内心永远的痛(黄渤泪目我的痴呆父亲)
- 蒜苔和鱿鱼尾巴一起炒,味道特别棒,又脆又嫩,有滋又有味(蒜苔和鱿鱼尾巴一起炒)
- 鱿鱼炒蒜苔不是黑暗料理,这样做清香扑鼻,鲜美脆嫩,开胃又下饭(鱿鱼炒蒜苔不是黑暗料理)
- 蒜苔炒鱿鱼(蒜苔炒鱿鱼)
热门推荐
- mybatis如何插入空格字符串(MyBatis SQL xml处理小于号与大于号正确的格式)
- ftp的使用方法(教你轻松玩转FTP)
- dedecms指定栏目授权(dedecms搜索结果页实现按频道模型显示不同结果模板的方法)
- layui多级联动下拉框的实现(使用layui框架实现点击左侧导航切换右侧内容且右侧选项卡跟随变化的效果)
- html5基本标签详解(详解HTML5布局和HTML5标签)
- csstable元素设置(CSS设置table下tbody的滚动条的实现)
- htmlcanvas的使用(html2canvas生成清晰的图片实现打印的示例代码)
- sql server数据库权限(SQL Server中通用数据库角色权限的处理详解)
- html5按钮点击跳转(HTML5页面嵌入小程序没有返回按钮及返回页面空白的问题)
- centos中docker安装部署(三分钟完成 ubuntu16.04初始化,Java,maven,docker环境的部署问题)