本节课重点了解 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 重写默认值对象。