1、自定义日期组件(扩展自My97 DatePicker 4.0)
(1)准备日历小图标(定义在easyui的icon.css中)
.icon-date{
background:url(‘../../../datepicker/skin/datePicker.gif’) no-repeat center center;
}
(2)自定义组件
(function($){
$.parser.plugins.push("dateTextBox");//注册扩展组件
$.fn.dateTextBox = function (options, param) {//定义扩展组件
//当options为字符串时,说明执行的是该插件的方法。
if (typeof options == "string") { return $.fn.textbox.apply(this, arguments); }
options = options || {};
//当该组件在一个页面出现多次时,this是一个集合,故需要通过each遍历。
return this.each(function () {
var jq = $(this);
//$.fn.combobox.parseOptions(this)作用是获取页面中的data-options中的配置
var opts = $.extend({}, $.fn.textbox.parseOptions(this), options);
var wdatePickerOpts = {
dateFmt : 'yyyy-MM-dd HH:mm:ss',
isShowClear : false,
onpicked : function() {
var value = this.innerHTML;
var node = $(this).parent().parent().prev();
$(this).text("");
node.textbox('setValue', value);
}
};
var myWdatePickerOpts = $.extend(true, wdatePickerOpts, options.wdatePicker);
//把配置对象myopts放到$.fn.textbox这个函数中执行。
var myopts = $.extend(true, {
icons: [{
iconCls:'icon-date', //提前定义
handler: function(e){
WdatePicker(myWdatePickerOpts);
}
}]
}, opts);
$.fn.textbox.call(jq, myopts);
});
}
})(jQuery);
(3)使用
dateTextBox扩展自textbox故textbox属性均可在dateTextBox中使用
<input class="easyui-dateTextBox" style="height: 30px;">
(4)效果图
2、扩展到datagrid(editor)
(function($){
$.extend($.fn.datagrid.defaults.editors, {
dateTextBox: {//dateTextBox是自定义editor的名称 init: function(container, options){ var input = $('<input class="easyui-dateTextBox">').appendTo(container); return input.dateTextBox(options); }, getValue: function(target){ return $(target).parent().find('input.textbox-value').val(); }, setValue: function(target, value){ $(target).dateTextBox("setValue",value); }, resize: function(target, width){ var input = $(target); if ($.boxModel == true){ input.width(width - (input.outerWidth() - input.width())); } else { input.width(width); } } }
});
})(jQuery);
(1)使用
editor : {
type : 'dateTextBox',
options : {
//dateTextBox继承自textbox,故可使用textbox的属性
wdatePicker : {
//My97 DatePicker 4.0 --此处定义DatePicker属性
}
}
}
(4)效果图