Extjs 只显示年月的控件
Example:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
this.yearMonth = new Ext.form.DateField({ name : 'YEAR_MONTH', format : 'Y-m', editable : false, allowBlank : false, maxValue : new Date(), plugins: 'monthPickerPlugin', listeners : { scope : this, 'select' : function(dft){ } } });
monthPickerPlugin.js:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 /*! 2 * Copyright(c) 2009 Costin Bereveanu, KEYPOINT SOLUTIONS 3 * costin@keypoint.ro 4 * http://www.keypoint.ro/ext/extensions/license.txt 5 */ 6 Ext.ux.MonthPickerPlugin = function() { 7 var picker; 8 var oldDateDefaults; 9 10 this.init = function(pk) { 11 picker = pk; 12 picker.onTriggerClick = picker.onTriggerClick.createSequence(onClick); 13 picker.getValue = picker.getValue.createInterceptor(setDefaultMonthDay).createSequence(restoreDefaultMonthDay); 14 picker.beforeBlur = picker.beforeBlur.createInterceptor(setDefaultMonthDay).createSequence(restoreDefaultMonthDay); 15 }; 16 17 function setDefaultMonthDay() { 18 oldDateDefaults = Date.defaults.d; 19 Date.defaults.d = 1; 20 return true; 21 } 22 23 function restoreDefaultMonthDay(ret) { 24 Date.defaults.d = oldDateDefaults; 25 return ret; 26 } 27 28 function onClick(e, el, opt) { 29 var p = picker.menu.picker; 30 p.activeDate = p.activeDate.getFirstDateOfMonth(); 31 if (p.value) { 32 p.value = p.value.getFirstDateOfMonth(); 33 } 34 35 p.showMonthPicker(); 36 37 if (!p.disabled) { 38 p.monthPicker.stopFx(); 39 p.monthPicker.show(); 40 41 p.mun(p.monthPicker, 'click', p.onMonthClick, p); 42 p.mun(p.monthPicker, 'dblclick', p.onMonthDblClick, p); 43 p.onMonthClick = p.onMonthClick.createSequence(pickerClick); 44 p.onMonthDblClick = p.onMonthDblClick.createSequence(pickerDblclick); 45 p.mon(p.monthPicker, 'click', p.onMonthClick, p); 46 p.mon(p.monthPicker, 'dblclick', p.onMonthDblClick, p); 47 } 48 } 49 50 function pickerClick(e, t) { 51 var el = new Ext.Element(t); 52 if (el.is('button.x-date-mp-cancel')) { 53 picker.menu.hide(); 54 } else if(el.is('button.x-date-mp-ok')) { 55 var p = picker.menu.picker; 56 p.setValue(p.activeDate); 57 p.fireEvent('select', p, p.value); 58 } 59 } 60 61 function pickerDblclick(e, t) { 62 var el = new Ext.Element(t); 63 if (el.parent() 64 && (el.parent().is('td.x-date-mp-month') 65 || el.parent().is('td.x-date-mp-year'))) { 66 67 var p = picker.menu.picker; 68 p.setValue(p.activeDate); 69 p.fireEvent('select', p, p.value); 70 } 71 } 72 }; 73 Ext.preg('monthPickerPlugin', Ext.ux.MonthPickerPlugin);
效果图:
具体事例参考:http://www.keypoint.ro/ext/