Extjs 日期控件扩展，只显示月份
//Extjs 引用var rq_formPanel = new Ext.FormPanel({border : false,hideLabel : true,autoWidth : true,height : 26,labelWidth : 35,style : {padding : '4 0 0 10'// 上 右 下 左},items : [{xtype : 'datefield',// 日期控件width : 145,validateOnBlur : true,fieldLabel : '月份',plugins : 'monthPickerPlugin',name : 'slsj_ks',format : 'Y-m',value : new Date()}]});
monthPickerPlugin.js 插件js
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(); // if you want to click,you can the dblclick event change click p.mun(p.monthPicker, 'click', p.onMonthClick, p); p.mun(p.monthPicker, 'click', 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, 'click', 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);
页:
[1]