ext2，3,和4 版本 只显示年月的日期插件

Ext技术交流群：164648099

?

1：ext3版本插件

来自官方论坛：http://www.sencha.com/forum/showthread.php?74002-3.x-Ext.ux.MonthMenu

?

插件代码：

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('monthPickerPlugin', Ext.ux.MonthPickerPlugin);  

?

调用例子：

  new Ext.form.DateField({      renderTo: document.body,      plugins:'monthPickerPlugin',      name:'rq',      format: 'Y-m'  });

?

?

2：Ext2版本（测试2.0.2成功）

???

? 插件代码见附件

? 使用例子：

引入：??<script type="text/javascript" src="DatePicker.js"></script>
??<script type="text/javascript" src="DateField.js"></script>

?

{xtype : "datefield",fieldLabel : "date",format:'Y-m'}

?效果图：

?

?

?

?

?

3:Ext4版本? 年月插件：

?

/** Months picker      重写 field.Date**/Ext.define('Ext.form.field.Month', {   extend:'Ext.form.field.Date',   alias: 'widget.monthfield',   requires: ['Ext.picker.Month'],   alternateClassName: ['Ext.form.MonthField', 'Ext.form.Month'],   selectMonth: null,   createPicker: function() {       var me = this,           format = Ext.String.format;       return Ext.create('Ext.picker.Month', {           pickerField: me,           ownerCt: me.ownerCt,           renderTo: document.body,           floating: true,           hidden: true,           focusOnShow: true,           minDate: me.minValue,           maxDate: me.maxValue,           disabledDatesRE: me.disabledDatesRE,           disabledDatesText: me.disabledDatesText,           disabledDays: me.disabledDays,           disabledDaysText: me.disabledDaysText,           format: me.format,           showToday: me.showToday,           startDay: me.startDay,           minText: format(me.minText, me.formatDate(me.minValue)),           maxText: format(me.maxText, me.formatDate(me.maxValue)),           listeners: {        select:        { scope: me,   fn: me.onSelect     },        monthdblclick: { scope: me,   fn: me.onOKClick     },           yeardblclick:  { scope: me,   fn: me.onOKClick     },       OkClick:       { scope: me,   fn: me.onOKClick     },           CancelClick:   { scope: me,   fn: me.onCancelClick }                   },           keyNavConfig: {               esc: function() {                   me.collapse();               }           }       });   },   onCancelClick: function() {       var me = this;       me.selectMonth = null;       me.collapse();   },   onOKClick: function() {       var me = this;       if( me.selectMonth ) {              me.setValue(me.selectMonth);           me.fireEvent('select', me, me.selectMonth);   }       me.collapse();   },   onSelect: function(m, d) {       var me = this;       me.selectMonth = new Date(( d[0]+1 ) +'/1/'+d[1]);   }}); /** Months picker **/

?

/********************************************************************************///使用时xtype: 'monthfield', //引用类型为上面自定义的部分       editable : false,       format : 'Y/m',//格式化数据       fieldLabel: 'beginDate',       value : new Date() //最好加上默认时间 否则在第一次点击的时候 如果没有选择数据就点击OK的话 数据无法展示在对话框中

??其他js见附件

?