easyui自定义日期组件并扩展到datagrid(editor)

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）效果图