easyui改写datetimebox实现年和月切换

话不多少，直接将代码贴上（直接做成控件了，复制成comboTime.js即可）

/*
分析周期与时间组合控件----

有分析周期下拉框："options": "data: [{ text: '月', value: 'm', limit: 0 }, { text: '季', value: 'q', limit: 2 }, { text: '年', value: 'y', limit: 0 }],timeOpt: [{ id: 'startDate', lable: '开始时间：' ,timeType:'q'}, { id: 'endDate', lable: '结束时间：' }]"
无分析周期下拉框："options": "hasPeriod: false,data: [{ text: '月', value: 'm', limit: 0 }],timeOpt: [{ id: 'startDate', lable: '开始时间：'}, { id: 'endDate', lable: '结束时间：' }]"
hasPeriod--是否有分析周期下拉框true--有,false--没有  默认true
data:下拉框数据（无下拉框时为当前时间控件的类型和时间间隔限制）
timeOpt：时间控件属性
*/

(function ($) {
    $.parser.plugins.push("comboTime");//注册扩展组件

    //实例化分析周期与时间控件
    $.fn.comboTime = function (options, param) {
        
        var self = this;
        var selfID = $(self).attr("id");
        var _inputEvents = { click: $.fn.timespinner.defaults.inputEvents.click };//时间微调框点击事件
        var queryEle = "<div class='dd-menu'><div class='label'></div><div class='red' style='display:none'></div><div class='ipt'></div></div>";
        if (typeof options == "string") {
            return $.fn.comboTime.methods[options](this, param);
        }
        options = options || {};
        self.options = $.extend({}, $.fn.comboTime.defaults, options);

        //$.fn.combobox.parseOptions(this)作用是获取页面中的data-options中的配置
        var opts = $.extend({}, $.fn.combobox.parseOptions(self[0]), options);
        self.options = $.extend({}, self.options, opts);

        return this.each(function () {
            if (self.options.hasPeriod)
                Init();
            else
                InitNoPeriod();
            self.options.comboTimeLoadSuccess.call(this);
        });

        //有时间周期下拉框
        function Init() {
            var jq = $("#" + selfID);
            jq.attr("pattern", "comboTime").attr("name", selfID);
            var div = $(self).parent().parent().parent();
            div.find("div[comboTo='" + selfID + "']").remove();
            $(self).parent().parent().css("display", "");
            //分析周期下拉框数据
            var comboData = self.options.data;
            comboData[0]["selected"] = true;

            var myopts = $.extend(true, {
                data: comboData,
                valueField: 'value',
                textField: 'text',
                editable: false,
                onSelect: function (record) {
                    inputChange();
                }
            }, opts);
            $.fn.combobox.call(jq, myopts);
            //时间控件
            var timeOpt = self.options.timeOpt;
            $.each(timeOpt, function (i, item) {
                var _div = $(queryEle).attr("comboTo", selfID);
                var operator = item.operator == undefined ? "=" : item.operator;
                var ipt = getInputHtml(item.id, operator, comboData[0]["value"]);
                _div.find("div.ipt").append(ipt);
                _div.find(".label").html(item.lable);
                if (div.find("div[comboTo = '" + selfID + "']").length > 0)
                    div.find("div[comboTo = '" + selfID + "']").after(_div);
                else
                    $(self).parent().parent().after(_div);
                $.parser.parse(_div);
            });
            inputChange();


        }

        //无时间周期下拉框
        function InitNoPeriod() {
            var div = $(self).parent().parent().parent();
            div.find("div[comboTo='" + selfID + "']").remove();
            //时间控件
            var timeOpt = self.options.timeOpt;
            var Period = self.options.data[0].value;
            $.each(timeOpt, function (i, item) {
                var _div = $(queryEle).attr("comboTo", selfID);
                var operator = item.operator == undefined ? "=" : item.operator;
                var ipt = getInputHtml(item.id, operator, Period);
                _div.find("div.ipt").append(ipt);
                _div.find(".label").html(item.lable);
                if (div.find("div[comboTo = '" + selfID + "']").length > 0)
                    div.find("div[comboTo = '" + selfID + "']").after(_div);
                else
                    $(self).parent().parent().after(_div);
                $.parser.parse(_div);
            });
            $(self).parent().parent().replaceWith('');
            inputChange(Period);
        }

        //生成时间控件html
        function getInputHtml(id, operator, Period) {
            var _type = "";
            switch (Period) {
                case "h":
                case "hd":
                    _type = "datetimebox";
                    break;
                case "y":
                    _type = "combobox";
                    break;
                default:
                    _type = "datebox";
                    break;
            }
            var ipt = '<input  id="' + id + '" name="' + id + '" class="easyui-' + _type + '" '
                + '" pattern="' + _type + '" operator="' + operator + '" data-options="editable:false" />';
            return ipt;
        }

        //重新生成时间控件html
        function resetInputHtml(id, Period) {
            var operator = $(id).attr("operator");
            var div = $(id).parent("div.ipt");
            div.html('');
            var ipt = getInputHtml(id.substring(1), operator, Period);
            div.append(ipt);
            $.parser.parse(div);
        }


        /*分析周期切换时时间控件相应切换 Period:分析周期类型*/
        function inputChange(Period) {
            if (Period == null || Period == undefined)
                Period = $("#" + selfID).combobox("getValue");
            if (Period == "h" || Period == "hd") {
                $.extend($.fn.timespinner.defaults, {
                    inputEvents: {
                        click: function (e) {
                            if (e == 1)////时间微调框点击分钟事件取消
                                return false;
                        }
                    }
                });
            }
            else {
                $.extend($.fn.timespinner.defaults, { inputEvents: _inputEvents });
            }
            var timeNow = Global_Date_Method.GetDate();
            var timeOpt = self.options.timeOpt;
            var id = "#" + timeOpt[0]["id"];
            var id2 = null;
            //单个时间
            if (timeOpt.length == 1) {
                resetInputHtml(id, Period);
                switch (Period) {
                    case "f":
                        $(id).datetimebox({
                            value: timeOpt[0].noDefault == true ? "" : timeNow.DateTime,
                            showSeconds: false,
                            onChange: function (newValue, oldValue) {
                                var now = new Date();
                                if (Global_Date_Method.GetDate(newValue) > now) {
                                    $(id).datetimebox("setValue", Global_Date_Method.GetDate().DateTime);
                                }
                            }
                        });
                        break;
                    case "h":
                    case "hd":
                        $(id).datetimebox({
                            value: timeOpt[0].noDefault == true ? "" : timeNow.DateTime,
                            showSeconds: false,
                            onChange: function (newValue, oldValue) {
                                var now = new Date();
                                if (Global_Date_Method.GetDate(newValue) > now) {
                                    $(id).datetimebox("setValue", Global_Date_Method.GetDate().DateTime);
                                }
                            },
                            onShowPanel: function () {
                                $(id).datebox('panel').find('span.spinner').find("input").attr("readonly", "readonly");
                            },
                            parser: function (s) {
                                var t = Date.parse(s);
                                if (!isNaN(t))
                                    return new Date(t);
                                return new Date();
                            },
                            formatter: function (date) {
                                var _date = date.getFullYear() + "-"
                                + ((date.getMonth()) < 9 ? "0" + (date.getMonth() + 1).toString() : (date.getMonth() + 1).toString()) + "-"
                                + ((date.getDate() < 10) ? ("0" + date.getDate().toString()) : date.getDate().toString()) + " "
                                + date.getHours() + ":00";
                                return _date;
                            }
                        });
                        break;
                    case "d":
                    case "dm":
                        $(id).datebox({
                            value: timeOpt[0].noDefault == true ? "" : timeNow.Date,
                            onChange: function (newValue, oldValue) {
                                var now = Global_Date_Method.GetDate().Date;
                                if (Global_Date_Method.GetDate(newValue) > Global_Date_Method.GetDate(now)) {
                                    $(id).datebox("setValue", now);
                                }
                            }
                        });
                        break;
                    case "m":
                    case "my":
                        hideDay(id, Period, timeOpt[0].noDefault == true ? "" : timeNow.Date.substring(0, 7));
                        break;
                    case "q":
                        hideDay(id, Period, timeOpt[0].noDefault == true ? "" : timeNow.Date.substring(0, 7))
                        break;
                    case "y":
                        $(id).combobox({
                            data: getYearData(),
                            valueField: 'text',
                            textField: 'value',
                        });
                        break;
                }
            }
                //时间范围
            else if (timeOpt.length == 2) {
                id2 = "#" + timeOpt[1]["id"];
                resetInputHtml(id, Period);
                resetInputHtml(id2, Period);
                var comboData = self.options.data;
                var limit = null;
                var defaultLimit = false;
                $.each(comboData, function (i, item) {
                    if (item.value == Period) {
                        limit = item.limit;
                        defaultLimit = item.defaultLimit;
                        return true;
                    }
                });
                var _startTime = timeOpt[0].noDefault == true ? "" : getDefaultTime(timeNow, Period, limit, defaultLimit);
                switch (Period) {
                    case "f":
                        $(id).datetimebox({
                            value: _startTime,
                            showSeconds: false,
                            onHidePanel: function () {
                                checkDateDif(Period, id, id2, limit, 1);
                            }
                        });


                        $(id2).datetimebox({
                            value: timeOpt[1].noDefault == true ? "" : timeNow.DateTime,
                            showSeconds: false,
                            onHidePanel: function () {
                                checkDateDif(Period, id, id2, limit, -1);
                            }
                        });
                        break;
                    case "h":
                    case "hd":
                        $(id).datetimebox({
                            value: _startTime,
                            showSeconds: false,
                            onHidePanel: function () {
                                checkDateDif(Period, id, id2, limit, 1);
                            },
                            onShowPanel: function () {
                                $(id).datebox('panel').find('span.spinner').find("input").attr("readonly", "readonly");
                            },
                            parser: function (s) {
                                var t = Date.parse(s);
                                if (!isNaN(t))
                                    return new Date(t);
                                return new Date();
                            },
                            formatter: function (date) {
                                var _date = date.getFullYear() + "-"
                                + ((date.getMonth()) < 9 ? "0" + (date.getMonth() + 1).toString() : (date.getMonth() + 1).toString()) + "-"
                                + ((date.getDate() < 10) ? ("0" + date.getDate().toString()) : date.getDate().toString()) + " "
                                + ((date.getHours() < 10) ? ("0" + date.getHours().toString()) : date.getHours().toString()) + ":00";
                                return _date;
                            }
                        });

                        $(id2).datetimebox({
                            value: timeOpt[1].noDefault == true ? "" : timeNow.DateTime,
                            showSeconds: false,
                            onHidePanel: function () {
                                checkDateDif(Period, id, id2, limit, -1);
                            },
                            onShowPanel: function () {
                                $(id2).datebox('panel').find('span.spinner').find("input").attr("readonly", "readonly");
                            },
                            parser: function (s) {
                                var t = Date.parse(s);
                                if (!isNaN(t))
                                    return new Date(t);
                                return new Date();
                            },
                            formatter: function (date) {
                                var _date = date.getFullYear() + "-"
                                + ((date.getMonth()) < 9 ? "0" + (date.getMonth() + 1).toString() : (date.getMonth() + 1).toString()) + "-"
                                + ((date.getDate() < 10) ? ("0" + date.getDate().toString()) : date.getDate().toString()) + " "
                                + ((date.getHours() < 10) ? ("0" + date.getHours().toString()) : date.getHours().toString()) + ":00";
                                return _date;
                            }
                        });
                        break;
                    case "d":
                    case "dm":
                        $(id).datebox({
                            value: _startTime,
                            onHidePanel: function () {
                                checkDateDif(Period, id, id2, limit, 1);
                            }
                        });

                        $(id2).datebox({
                            value: timeOpt[1].noDefault == true ? "" : timeNow.Date,
                            onHidePanel: function () {
                                checkDateDif(Period, id, id2, limit, -1);
                            }
                        });
                        break;
                    case "m":
                    case "my":
                    case "q":
                        resetDatebox(id, id2, Period, limit, timeOpt[1].noDefault == true ? "" : timeNow, _startTime);
                        break;
                    case "y":
                        $(id).combobox({
                            value: _startTime,
                            data: getYearData(),
                            onSelect: function (record) {
                                if (limit != null && limit != -1) {
                                    var startYear = record.value;
                                    var endYear = parseInt($(id2).combobox("getValue"));
                                    var dif = endYear - startYear;
                                    if (dif < 0 || dif > limit) {
                                        var data = $(id2).combobox("getData");
                                        data = JSLINQ(data).Select(function (item) {
                                            return item["value"];
                                        }).items;
                                        var result = $.inArray(startYear + limit, data);
                                        if (result > -1)
                                            $(id2).combobox("setValue", startYear + limit);
                                        else
                                            $(id2).combobox("setValue", startYear);
                                    }
                                }
                            }
                        });
                        $(id2).combobox({
                            value: timeOpt[1].noDefault == true ? "" : timeNow.Date.substring(0, 4),
                            data: getYearData(),
                            onSelect: function (record) {
                                if (limit != null && limit != -1) {
                                    var startYear = parseInt($(id).combobox("getValue"));
                                    var endYear = record.value;
                                    var dif = endYear - startYear;
                                    if (dif < 0 || dif > limit) {
                                        var data = $(id).combobox("getData");
                                        data = JSLINQ(data).Select(function (item) {
                                            return item["value"];
                                        }).items;
                                        var result = $.inArray(endYear - limit, data);
                                        if (result > -1)
                                            $(id).combobox("setValue", endYear - limit);
                                        else
                                            $(id).combobox("setValue", endYear);
                                    }
                                }
                            }
                        });
                        break;
                }
            }

            if (Period == "f" || Period == "h" || Period == "hd") {
                $(id).datetimebox().datetimebox('calendar').calendar({
                    validator: function (date) {
                        var now = new Date();
                        return now > date;
                    }
                });
                if (id2) {
                    $(id2).datetimebox().datetimebox('calendar').calendar({
                        validator: function (date) {
                            var now = new Date();
                            return now > date;
                        }
                    });
                }

            }
            else if (Period == "d" || Period == "m" || Period == "q" || Period == "dm" || Period == "my") {
                $(id).datebox().datebox('calendar').calendar({
                    validator: function (date) {
                        var now = new Date();
                        return now > date;
                    }
                });
                if (id2) {
                    $(id2).datebox().datebox('calendar').calendar({
                        validator: function (date) {
                            var now = new Date();
                            return now > date;
                        }
                    });
                }
            }
        }

        //设置时间控件默认值
        function getDefaultTime(timeNow, Period, limit, defaultLimit) {
            limit = (limit != null && limit != -1) ? limit * (-1) : limit;
            var _startTime = null;
            switch (Period) {
                case "h":
                case "hd":
                    Period = Period == "hd" ? "d" : Period;
                    if (limit != null && limit != -1 && defaultLimit)
                        _startTime = Global_Date_Method.dateAdd(timeNow.DateTime, Period, limit).DateTime;
                    else
                        _startTime = timeNow.DateTime;
                    break;
                case "d":
                case "dm":
                    Period = Period == "dm" ? "m" : Period;
                    if (limit != null && limit != -1 && defaultLimit)
                        _startTime = Global_Date_Method.dateAdd(timeNow.Date, Period, limit).Date;
                    else
                        _startTime = timeNow.Date;
                    break;
                case "m":
                case "q":
                case "my":
                    Period = Period == "q" ? "m" : (Period == "my" ? "y" : Period);
                    if (limit != null && limit != -1 && defaultLimit)
                        _startTime = Global_Date_Method.dateAdd(timeNow.Date, Period, limit).Date.substring(0, 7);
                    else
                        _startTime = timeNow.Date.substring(0, 7);
                    break;
                case "y":
                    if (limit != null && limit != -1 && defaultLimit)
                        _startTime = Global_Date_Method.dateAdd(timeNow.Date, Period, limit).Date.substring(0, 4);
                    else
                        _startTime = timeNow.Date.substring(0, 4);
                    break;
            }
            return _startTime;
        }

        //年下拉框数据
        function getYearData() {
            var timeNow = new Date();
            var y = timeNow.getFullYear();
            var data = [];
            for (var i = 0 ; i < 5; i++) {
                data.push({ text: y - i, value: y - i });
            }
            data[0]["selected"] = true;
            return data;
        }

        /*初始化只显示年月的时间控件*/
        function hideDay(id, Period, defaultValue) {
            resetInputHtml(id, Period);
            $(id).datebox({
                value: defaultValue,
                onShowPanel: function () {// 显示日趋选择对象后再触发弹出月份层的事件，初始化时没有生成月份层  
                    span.trigger('click'); // 触发click事件弹出月份层  
                    if (!tds)
                        setTimeout(function () {// 延时触发获取月份对象，因为上面的事件触发和对象生成有时间间隔  
                            tds = p.find('div.calendar-menu-month-inner td');
                            tds.click(function (e) {
                                e.stopPropagation(); // 禁止冒泡执行easyui给月份绑定的事件  
                                var year = /d{4}/.exec(span.html())[0]// 得到年份  
                                , month = parseInt($(this).attr('abbr'), 10); // 月份  
                                $(id).datebox('hidePanel')// 隐藏日期对象  
                                .datebox('setValue', year + '-' + month); // 设置日期的值  
                            });
                        }, 0);
                    p.find('input.calendar-menu-year').attr("readonly", "readonly");
                },
                parser: function (s) {
                    var t = Date.parse(s);
                    if (!isNaN(t))
                        return new Date(t);
                    return new Date();
                },// 配置parser，只返回年月  
                formatter: function (date) {
                    var y = date.getFullYear();
                    var m = date.getMonth() + 1;
                    return y + "-" + (m < 10 ? ('0' + m) : m);
                }// 配置formatter，只返回年月  
            });
            var p = $(id).datebox('panel'), // 日期选择对象  
            tds = false, // 日期选择对象中月份  
            span = p.find('span.calendar-text'); // 显示月份层的触发控件  
        }

        /*只显示年月的时间控件时间范围限制*/
        function resetDatebox(id, id2, Period, limit, timeNow, _startTime) {
            hideDay(id, Period, _startTime);
            hideDay(id2, Period, timeNow == "" ? timeNow : timeNow.Date.substring(0, 7));
            $(id).datebox({
                onChange: function (newValue, oldValue) {
                    checkDateDif(Period, id, id2, limit, 1);
                }
            });

            $(id2).datebox({
                onChange: function (newValue, oldValue) {
                    checkDateDif(Period, id, id2, limit, -1);
                }
            });
        }

        /*
        Period:时间类型
        id：开始时间
        id2:结束时间
        limit:时间间隔限制(null--无限制但结束时间大于开始时间 -1--无限制)
        isStart:是否是开始时间控件1--是 -1---不是
        */
        function checkDateDif(Period, id, id2, limit, isStart) {
            var _id = isStart == 1 ? id : id2;
            var _id2 = isStart == 1 ? id2 : id;;
            if (Period == "f" || Period == "h" || Period == "hd") {
                var newValue = $(_id).datetimebox("getValue");
                var now = Global_Date_Method.GetDate().DateTime;
                if (Global_Date_Method.GetDate(newValue) > Global_Date_Method.GetDate(now))
                    $(_id).datetimebox("setValue", now);
            }
            switch (limit) {
                case null:
                    if (Period == "f" || Period == "h" || Period == "hd") {
                        var startdate = $(id).datetimebox("getValue");
                        var enddate = $(id2).datetimebox("getValue");
                        if (Global_Date_Method.GetDate(startdate) > Global_Date_Method.GetDate(enddate))
                            $(_id2).datetimebox("setValue", (isStart == 1 ? startdate : enddate));

                    }
                    else if (Period == "d" || Period == "m" || Period == "q" || Period == "dm" || Period == "my") {
                        var startdate = $(id).datebox("getValue");
                        var enddate = $(id2).datebox("getValue");
                        if (Global_Date_Method.GetDate(startdate) > Global_Date_Method.GetDate(enddate))
                            $(_id2).datebox("setValue", (isStart == 1 ? startdate : enddate));
                    }
                    else if (Period == "y") {
                        var startYear = parseInt($(id).combobox("getValue"));
                        var endYear = parseInt($(id2).combobox("getValue"));
                        if (startYear > endYear)
                            $(_id2).combobox("setValue", (isStart == 1 ? startYear : endYear));
                    }
                    break;
                case -1:
                    break;
                default:
                    if (Period == "f" || Period == "h" || Period == "hd") {
                        var _Period = Period == "hd" ? Period : null;
                        Period = Period == "hd" ? "d" : Period;
                        var startdate = $(id).datetimebox("getValue");
                        var enddate = $(id2).datetimebox("getValue");
                        var dif = Global_Date_Method.dateDiff(Period, startdate, enddate);
                        if (dif < 0 || dif > limit || (_Period == "hd" && Global_Date_Method.GetDate(startdate) > Global_Date_Method.GetDate(enddate))) {
                            var _limit = Global_Date_Method.dateAdd((isStart == 1 ? startdate : enddate), Period, limit * isStart).DateTime;
                            var now = Global_Date_Method.GetDate().DateTime;
                            if (Global_Date_Method.GetDate(_limit) > Global_Date_Method.GetDate(now))
                                _limit = now;
                            $(_id2).datetimebox("setValue", _limit);
                        }
                    }
                    else if (Period == "d" || Period == "m" || Period == "q" || Period == "dm" || Period == "my") {
                        var _Period = (Period == "dm" || Period == "my") ? Period : null;
                        Period = Period == "q" ? "m" : (Period = Period == "dm" ? "m" : (Period == "my" ? "y" : Period));
                        var startdate = $(id).datebox("getValue");
                        var enddate = $(id2).datebox("getValue");
                        var dif = Global_Date_Method.dateDiff(Period, startdate, enddate);
                        if (dif < 0 || dif > limit || ((_Period == "dm" || _Period == "my") && Global_Date_Method.GetDate(startdate) > Global_Date_Method.GetDate(enddate))) {
                            var _limit = Global_Date_Method.dateAdd((isStart == 1 ? startdate : enddate), Period, limit * isStart).Date;
                            var now = Global_Date_Method.GetDate().Date
                            if (Global_Date_Method.GetDate(_limit) > Global_Date_Method.GetDate(now))
                                _limit = now;
                            $(_id2).datebox("setValue", _limit);
                        }
                    }
                    else if (Period == "y") {
                        var startYear = parseInt($(id).combobox("getValue"));
                        var endYear = parseInt($(id2).combobox("getValue"));
                        var dif = endYear - startYear;
                        if (dif < 0 || dif > limit) {
                            var data = $(_id2).combobox("getData");
                            data = JSLINQ(data).Select(function (item) {
                                return item["value"];
                            }).items;
                            var _year = (isStart == 1 ? startYear : endYear) + limit * isStart;
                            var result = $.inArray(_year, data);
                            if (result > -1)
                                $(_id2).combobox("setValue", _year);
                            else
                                $(_id2).combobox("setValue", isStart == 1 ? startYear : endYear);
                        }
                    }
                    break;
            }
        }
    }

    //选项卡默认属性和事件
    $.fn.comboTime.defaults = {
        data: [{ text: '分钟', value: 'f', limit: null, defaultLimit: false },
            { text: '小时', value: 'h', limit: null, defaultLimit: false },
            { text: '日', value: 'd', limit: null, defaultLimit: false },
            { text: '月', value: 'm', limit: null, defaultLimit: false },
            { text: '季', value: 'q', limit: 2, defaultLimit: false },
            { text: '年', value: 'y', limit: null, defaultLimit: false }
        ],
        //data: [{ text: '分钟', value: 'f', limit: 60 }, { text: '小时', value: 'h', limit: 3 }, { text: '日', value: 'd', limit: 2 }, { text: '月', value: 'm', limit: 4 }, { text: '季', value: 'q', limit: 2 }, { text: '年', value: 'y', limit: 2 }],
        timeOpt: [{ id: "startDate", lable: "开始时间：", operator: '>', noDefault: true }],//operator--操作符 defaultValue--控件默认值（未设置时默认当前时间）, { id: "endDate", lable: "结束时间：" }],
        comboTimeLoadSuccess: function () { },
        hasPeriod: true

    };

    $.fn.comboTime.methods = {
        //获取选择的选项卡面板。下面的例子展示了如何获取选择的选项卡面板索引
        getValue: function (jq) {
            return $(jq[0]).combobox("getValue");
        }
    };
})(jQuery);

怎么使用呢：

前端：

                <div class="label">查询周期：</div>
                <div class="ipt"><input id="period" /></div>

js调用：

$("#period").comboTime({
            hasPeriod: true,
            data: [
                { text: '年', value: 'y', limit: null, defaultLimit: false },
                { text: '月', value: 'm', limit: null, defaultLimit: false }
            ],
            timeOpt: [{ id: "queryDate", lable: "查询时间：", operator: '>', noDefault: false }],
            comboTimeLoadSuccess: function () {
                var time = $("#period").combobox('getValue');
                
            }
        });