DateBox( 日期输入框) 组件
2015-12-02 10:43
519 查看
本节课重点了解 EasyUI 中 DateBox(日期输入框)组件的使用方法,这个组件依赖于
Combo(自定义下拉框)和 Calendar(日历)。
一. 加载方式
//class 加载方式
<input id="box" type="text" class="easyui-datebox"
required="required">
//JS 加载调用
$('#box').datebox({
});
二. 属性列表
//属性设置
$('#box').datebox({
panelWidth : 300,
panelHeight : 300,
currentText : '今',
closeText : '关',
okText : '确定',
disabled : true,
buttons : buttons,
formatter : function (date) {
return date.getFullYear() + '/' + date.getMonth() + 1 +
'/' + date.getDate();
},
parser : function (s) {
return new Date(2015,6,1);
}
});
var buttons = $.extend([], $.fn.datebox.defaults.buttons);
buttons.splice(1, 0, {
text: 'MyBtn',
handler: function(target){
alert('click MyBtn');
}
});
<input class="easyui-datebox" sharedCalendar="#sc">
<input class="easyui-datebox" sharedCalendar="#sc">
<div id="sc" class="easyui-calendar" data-options="firstDay:1"></div>
三. 事件列表
//事件列表
$('#box').calendar({
onSelect : function (date) {
alert(date.getFullYear() + ":" + (date.getMonth() + 1) + ":"
+ date.getDate());
},
});
四. 方法列表
//返回属性对象
console.log($('#box').calendar('options'));
//返回日历对象
$('#box').datebox('calendar').calendar({
firstDay : 1,
});
//设置输入日期
$('#box').datebox('setValue','2015-6-1');
PS:我们可以使用$.fn.databox.defaults 重写默认值对象。
Combo(自定义下拉框)和 Calendar(日历)。
一. 加载方式
//class 加载方式
<input id="box" type="text" class="easyui-datebox"
required="required">
//JS 加载调用
$('#box').datebox({
});
二. 属性列表
//属性设置
$('#box').datebox({
panelWidth : 300,
panelHeight : 300,
currentText : '今',
closeText : '关',
okText : '确定',
disabled : true,
buttons : buttons,
formatter : function (date) {
return date.getFullYear() + '/' + date.getMonth() + 1 +
'/' + date.getDate();
},
parser : function (s) {
return new Date(2015,6,1);
}
});
var buttons = $.extend([], $.fn.datebox.defaults.buttons);
buttons.splice(1, 0, {
text: 'MyBtn',
handler: function(target){
alert('click MyBtn');
}
});
<input class="easyui-datebox" sharedCalendar="#sc">
<input class="easyui-datebox" sharedCalendar="#sc">
<div id="sc" class="easyui-calendar" data-options="firstDay:1"></div>
三. 事件列表
//事件列表
$('#box').calendar({
onSelect : function (date) {
alert(date.getFullYear() + ":" + (date.getMonth() + 1) + ":"
+ date.getDate());
},
});
四. 方法列表
//返回属性对象
console.log($('#box').calendar('options'));
//返回日历对象
$('#box').datebox('calendar').calendar({
firstDay : 1,
});
//设置输入日期
$('#box').datebox('setValue','2015-6-1');
PS:我们可以使用$.fn.databox.defaults 重写默认值对象。
相关文章推荐
- mybatis写mapper文件注意事项
- 11月国内操作系统市场份额:Win 7夺冠 涨幅明显
- Eclipse下开发环境搭建
- PHP下使用fopen函数打开文件时的几点注意
- [置顶] Android性能优化之使用线程池处理异步任务
- 查询MySQL数据占用情况
- 利用socket进行TCP和UDP编程
- Reverse Linked List 反转链表
- ARC内存优化
- ASP.NET Calendar 控件
- 23. 根据公司查找底下的所有部门,根据部门找对应的公司
- ios设计模式 装饰模式 decorator
- vector.h file not found
- Apache的IP访问控制
- git使用中关于文件名太长无法处理的问题
- 制作简历模板的网站
- Distributed Systems-Basics
- 倍数提高工作效率的Android Studio奇技
- ios UIWebView 加载网页、文件、 html
- 【C语言提高16】数组中括号与指针关系和数组名常量指针分析