extjs实现年月格式的日期选择(DatePicker)

Extjs 的类库中只有年月日的DatePicker，那么如何实现年月的选择呢？

我这里使用Extjs 的插件（plugin）来灵活实现YM的DatePicker，具体的代码如下：

/*-------------only 'Y-m' format section'----------------------*/
Ext.ux.MonthPickerPlugin = function() {
    var picker;
    var oldDateDefaults;

    this.init = function(pk) {
        picker = pk;
        picker.onTriggerClick = picker.onTriggerClick.createSequence(onClick);
        picker.getValue = picker.getValue.createInterceptor(setDefaultMonthDay).createSequence(restoreDefaultMonthDay);
        picker.beforeBlur = picker.beforeBlur.createInterceptor(setDefaultMonthDay).createSequence(restoreDefaultMonthDay);
    };

    function setDefaultMonthDay() {
        oldDateDefaults = Date.defaults.d;
        Date.defaults.d = 1;
        return true;
    }

    function restoreDefaultMonthDay(ret) {
        Date.defaults.d = oldDateDefaults;
        return ret;
    }

    function onClick(e, el, opt) {
        var p = picker.menu.picker;
        p.activeDate = p.activeDate.getFirstDateOfMonth();
        if (p.value) {
            p.value = p.value.getFirstDateOfMonth();
        }

        p.showMonthPicker();

        if (!p.disabled) {
            p.monthPicker.stopFx();
            p.monthPicker.show();

            p.mun(p.monthPicker, 'click', p.onMonthClick, p);
            p.mun(p.monthPicker, 'dblclick', p.onMonthDblClick, p);
            p.onMonthClick = p.onMonthClick.createSequence(pickerClick);
            p.onMonthDblClick = p.onMonthDblClick.createSequence(pickerDblclick);
            p.mon(p.monthPicker, 'click', p.onMonthClick, p);
            p.mon(p.monthPicker, 'dblclick', p.onMonthDblClick, p);
        }
    }

    function pickerClick(e, t) {
        var el = new Ext.Element(t);
        if (el.is('button.x-date-mp-cancel')) {
            picker.menu.hide();
        } else if(el.is('button.x-date-mp-ok')) {
            var p = picker.menu.picker;
            p.setValue(p.activeDate);
            p.fireEvent('select', p, p.value);
        }
    }

    function pickerDblclick(e, t) {
        var el = new Ext.Element(t);
        if (el.parent()
            && (el.parent().is('td.x-date-mp-month')
            || el.parent().is('td.x-date-mp-year'))) {

            var p = picker.menu.picker;
            p.setValue(p.activeDate);
            p.fireEvent('select', p, p.value);
        }
    }
};

Ext.preg('ymPickerPlugin', Ext.ux.MonthPickerPlugin);

调用片段代码如下：

   Ext.StdDateTopToolbar.superclass.constructor.call(this, {
        enableOverflow: true,
        items: [
            {xtype: 'tbspacer', width: 10},
            {
                xtype: 'tbtext',
                text: ' *结束(Y-m-d)：'
            },
            {
                xtype: 'datefield' ,
                format: 'Y-m-d',
                maxValue: currentTime,
                value: currentTime  ,
                id : "_endYMD"
            },
            {xtype: 'tbspacer', width: 10}
            ,
            {
                xtype: 'tbtext',
                text: ' *开始(Y-m)：'
            },
            {
                xtype: 'datefield' ,
                format: 'Y-m',
                value:currentTime,
                plugins: 'ymPickerPlugin',
                id : "_startYM"
            },{xtype: 'tbspacer', width: 10}
            , {
                xtype: 'tbtext',
                text: ' *结束(Y-m-d H:m)：'
            },
            {
                xtype: 'datetimefield' ,
                format: 'Y-m-d H:i',
                maxValue: currentTime,
                value: currentTime  ,
                id : "_endYMDHm"   ,
                width:130
            }
            , {
                xtype: 'tbtext',
                text: ' *结束(Y-m-d H:m:d)：'
            },
            {
                xtype: 'datetimefield' ,
                format: 'Y-m-d H:i:s',
                maxValue: currentTime,
                value: currentTime  ,
                id : "_endYMDHms"   ,
                width:150
            }
            ,{xtype: 'tbspacer', width: 10}
            ,{
                xtype: 'tbtext',
                text: ' *开始年份：'
            }
            ,
            {
                xtype:'yearcombobox',
                id:'myYearComboBox'
            }
            ,{xtype: 'tbspacer', width: 10}
            ,
            {
                xtype:'yearcombobox'
            }
            ,{xtype: 'tbspacer', width: 10}
            ,{
                text: '查询',
                iconCls: 'search',
                handler: function(oButton, oEvent)
                {
                    var endTime = Ext.getCmp('_endYMD').getRawValue();
                    var startYM = Ext.getCmp('_startYM').getRawValue();
                    var endFullM = Ext.getCmp('_endYMDHm').getRawValue();
                    var endFullS = Ext.getCmp('_endYMDHms').getRawValue();
                    var startYear = Ext.getCmp('myYearComboBox').getRawValue();
                    var _startYear = Ext.getCmp('_startYear').getRawValue();
                    if(endTime != '' && startYM !='' ){
                        alert("_endYMD:"+ endTime + "\n, _startYM:" + startYM + "\n,endFullM: "
                            + endFullM + "\n, endFullS:"+ endFullS + "\n, specified ID Year:"+ startYear
                            + "\n, default Id '_startYear'"+_startYear);
                    } else{
                        if( startTime.length == 0){
                            Ext.MessageBox.alert('友情提示', '请输入开始时间！');
                        }else if(endTime.length ==0){
                            Ext.MessageBox.alert('友情提示','请输入结束时间！');
                        }
                    }
                }
            },{xtype: 'tbspacer', width: 10}
            ,{
                text: '重置',
                iconCls: 'reset',
                handler: function()
                {
                    var aComponent = me.findByType('textfield');
                    for(var i=0; i < aComponent.length; i++){
                        aComponent[i].setValue("");
                    }
                }
            }
        ]
    });