/** * 选择年月picker */ Ext.define('erp.view.core.form.MonthDateField', { extend : 'Ext.form.field.Trigger', alias : 'widget.monthdatefield', triggerCls : Ext.baseCSSPrefix + "form-date-trigger", initComponent : function() { this.callParent(arguments); this.addEvents({ afterChangeValue : true }); }, listeners : { afterrender : function(field) { if (field.fromnow) { this.minYearMonth = this.currentMonth(); this.setMinValue(this.minYearMonth); } if (field.autoValue && Ext.isEmpty(field.value)) { field.setValue(field.currentMonth()); } } }, currentMonth : function() { return Number(Ext.Date.format(new Date(), 'Ym')); }, onTriggerClick : function() { var me = this; if (this.monthPicker && !this.monthPicker.hidden) { this.monthPicker.hide(); return; } this.createMonthPicker().show(); this.monthPicker.prevEl.dom.onclick = function() {// 翻页时刷新年月样式 me.setMaxValue(me.maxYearMonth); me.setMinValue(me.minYearMonth); }; this.monthPicker.nextEl.dom.onclick = function() { me.setMaxValue(me.maxYearMonth); me.setMinValue(me.minYearMonth); }; }, fromnow : false,// 可选择的月份从当前时间开始 autoValue : true, // 取当前时间 regex : /^[1-9]\d{3}[0-1]\d$/, regexText : '格式不正确!', editable:false, createMonthPicker : function() { var b = this, a = b.monthPicker; if (!a) { b.monthPicker = a = Ext.create("Ext.picker.Month", { renderTo : Ext.getBody(), floating : true, ownerCt : b, listeners : { scope : b, cancelclick : b.onCancelClick, okclick : b.onOkClick, yearclick : b.onYearChoose, yeardblclick : b.onOkClick, monthdblclick : b.onOkClick, afterrender : function(p) { if (b.maxValue) { p.setMaxDate(b.maxValue); } if (b.minValue) { p.setMinDate(b.minValue); } } }, setMaxDate : function(dt) { this.maxDate = dt; var years = this.years; Ext.each(years.elements, function(el) { if (Number(el.innerHTML) > dt.getFullYear()) { el.style.color = '#EEE9E9'; } else { el.style.color = 'black'; } }); }, setMinDate : function(dt) { this.minDate = dt; var years = this.years; Ext.each(years.elements, function(el) { if (Number(el.innerHTML) < dt.getFullYear()) { el.style.color = '#EEE9E9'; } else { el.style.color = 'black'; } }); } }); a.alignTo(b.inputEl, 'tl-bl?'); } return a; }, onCancelClick : function() { this.monthPicker.hide(); }, onOkClick : function() { var vals = this.monthPicker.getValue(); var a = vals[0], b = vals[1]; if (vals.length == 2) { a = a == null ? new Date().getMonth() : a; a = Number(a) + 1; a = a < 10 ? '0' + a : a; b = b == null ? new Date().getFullYear() : b; if (this.minValue) { if (Number(b + '' + a) < this.minYearMonth) { return; } } if (this.maxValue) { if (Number(b + '' + a) > this.maxYearMonth) { return; } } this.setValue(b + '' + a); } this.fireEvent('afterChangeValue', this); this.monthPicker.hide(); }, setMaxValue : function(value) { if (this.regex.test(value)) { var me = this, picker = me.monthPicker, maxValue = Ext.Date.parse( value.toString().substring(0, 4) + '-' + value.toString().substring(4, 6), 'Y-m'); me.maxValue = maxValue; me.maxYearMonth = Number(value.toString().substring(0, 4) + '' + value.toString().substring(4, 6)); if (picker) { picker.setMaxDate(maxValue); } } }, setMinValue : function(value) { if (this.regex.test(value)) { var me = this, picker = me.monthPicker, minValue = Ext.Date.parse( value.toString().substring(0, 4) + '-' + value.toString().substring(4, 6), 'Y-m'); me.minValue = minValue; me.minYearMonth = Number(value.toString().substring(0, 4) + '' + value.toString().substring(4, 6)); if (picker) { picker.setMinDate(minValue); } } }, onYearChoose : function(picker, value, e) { var me = this; var bool; Ext.each(picker.months.elements, function(el, m) {// (m+1)的实际为1,3,5,7,9,11,2,4,6,8,10,12,并非与月份对应 m = me.getMonthNum(el.innerHTML); var ym = Number('' + value[1] + '' + m); bool = true; if (me.maxYearMonth && ym > me.maxYearMonth) { el.style.color = '#EEE9E9'; bool = false; } else { el.style.color = 'black'; } if (me.minYearMonth && ym < me.minYearMonth) { el.style.color = '#EEE9E9'; } else { if (bool) { el.style.color = 'black'; } } }); }, getMonthNum : function(m) { var arr = { "一月" : '01', "二月" : '02', "三月" : '03', "四月" : '04', "五月" : '05', "六月" : '06', "七月" : '07', "八月" : '08', "九月" : '09', "十月" : '10', "十一月" : '11', "十二月" : '12' }; return arr[m]; }, setValue : function(value) { if (!Ext.isEmpty(value) && !this.regex.test(value)) { var y = new Date().getFullYear(), m = new Date().getMonth() + 1; m = m < 10 ? '0' + m : m; value = Number(y + '' + m); } this.callParent(arguments); }, hasValid : function() { return this.regex.test(this.value); } });