my97日期控件插件的开发与编写

my97日期控件插件的开发与编写

/*扩展一个easyui 的my97 控件*/
(function ($, undefined) {

    function create(target) {
        var state = $.data(target, "my97"), opts = state.options,
            t = $(target).addClass("my97-f").combo($.extend({}, opts, {
                panelWidth: 0, panelHeight: 0,
                onShowPanel: function () {
                },
                onHidePanel: function () {
                    if (state.dialog) {
                        var dia = state.dialog, dopts = dia.dialog("options");
                        state.dialog = null;
                        if (!dopts.closed) { dia.dialog("close"); }
                    }
                },
                onDestroy: function () {
                    if (state.dialog) {
                        state.dialog.dialog("destroy");
                        state.dialog = null;
                    }
                    if ($.isFunction(opts.onDestroy)) { opts.onDestroy.apply(this, arguments); }
                }
            })),
            textbox = t.combo("textbox"), panel = t.combo("panel");
        textbox.closest("span.combo").addClass("datebox");
        textbox.click(function () {
            var wopts = $.extend({}, opts, {
                el: textbox[0],
                readOnly: true,
                onpicking: function (dp) {
                    if ($.isFunction(opts.onpicked) && opts.onpicked.apply(this, arguments) == false) {
                        return false;
                    }
                    setValue(target, dp.cal.getNewDateStr());
                    $.util.exec(function () { t.combo("hidePanel"); });
                },
                oncleared: function () { t.combo("clear"); }
            });
            if (opts.readonly === false)
                WdatePicker(wopts);
        });
        panel.panel("body").addClass("combo-panel-noborder");

        opts.originalValue = opts.value;
        if (opts.value) {
            setValue(target, opts.value);
        }
        t.combo("validate");
    };

    function showWdatePicker(target) {

    }

    function setValue(target, value) {
        var t = $(target);
        var v = value || "";
        t.combo("setValue", v).combo("setText", v);
    };

    function getOptions(target) {
        var my97Opts = $.data(target, 'my97').options;
        var comboOpts = $.data(target, "combo").options;
        return $.extend({}, my97Opts, comboOpts);
    }

    $.fn.my97 = function (options, param) {
        if (typeof options == "string") {
            var method = $.fn.my97.methods[options];
            if (method) {
                return method(this, param);
            } else {
                return this.combo(options, param);
            }
        }
        options = options || {};
        return this.each(function () {
            var state = $.data(this, "my97");
            if (state) {
                $.extend(state.options, options);
            } else {
                $.data(this, "my97", { options: $.extend({}, $.fn.my97.defaults, $.fn.my97.parseOptions(this), options) });
                create(this);
            }
        });
    };

    $.fn.my97.parseOptions = function (target) {
        return $.extend({}, $.fn.combo.parseOptions(target), $.parser.parseOptions(target, [
            "el", "vel", "weekMethod", "lang", "skin", "dateFmt", "realDateFmt", "realTimeFmt", "realFullFmt", "minDate", "maxDate", "startDate",
            {
                doubleCalendar: "boolean", enableKeyboard: "boolean", enableInputMask: "boolean", autoUpdateOnChanged: "boolean",
                isShowWeek: "boolean", highLineWeekDay: "boolean", isShowClear: "boolean", isShowOK: "boolean", isShowToday: "boolean",
                isShowOthers: "boolean", autoPickDate: "boolean", qsEnabled: "boolean", autoShowQS: "boolean", opposite: "boolean"
            },
            { firstDayOfWeek: "number", errDealMode: "number" }
        ]));
    };

    $.fn.my97.methods = {
        options: function (jq) {
            var opts = jq.combo("options"), copts = $.data(jq[0], 'my97').options;
            return $.extend(copts, {
                originalValue: opts.originalValue, disabled: opts.disabled, readonly: opts.readonly
            });
        },

        setValue: function (jq, value) { return jq.each(function () { setValue(this, value); }); }
    };

    $.fn.my97.defaults = $.extend({}, $.fn.combo.defaults, {

        dateFmt: "yyyy-MM-dd"

    });


    if ($.fn.datagrid) {
        $.extend($.fn.datagrid.defaults.editors, {
            my97: {
                init: function (container, options) {
                    var box = $("<input type=\"text\"></input>").appendTo(container).my97(options);
                    box.my97("textbox").addClass("datagrid-editable-input");
                    return box;
                },
                destroy: function (target) {
                    $(target).my97("destroy");
                },
                getValue: function (target) {
                    var t = $(target), opts = t.my97("options");
                    return t.my97(opts.multiple ? "getValues" : "getValue");
                },
                setValue: function (target, value) {
                    var t = $(target), opts = t.my97("options");
                    if (value) {
                        t.my97("setValue", value);
                    } else {
                        t.my97("clear");
                    }
                },
                resize: function (target, width) {
                    $(target).my97("resize", width);
                },
                setFocus: function (target) {
                    $(target).my97("textbox").focus();
                }
            }
        });
    }



    $.parser.plugins.push("my97");

    if ($.fn.form) {
        $.fn.form.defaults.fieldTypes.unshift("my97");
        //$.array.insert($.fn.form.comboList, 0, "my97");
    }

})(jQuery);

测试：

    $("#productionDate").my97({
        maxDate:'#F{$(\'#installDate\').my97(\'getValue\')}'
    });
        $("#maintainDate").my97({
            dateFmt:'yyyy-MM-dd HH:mm:ss'
        });