Ext.define('Ext.form.field.Month', {
extend : 'Ext.form.field.Date',
alias : 'widget.monthfield',
format : 'Y-m',
createPicker : function () {
var me = this,
format = Ext.String.format;
return new Ext.picker.Month({
pickerField : me,
ownerCt : me.ownerCt,
renderTo : document.body,
floating : true,
shadow : false,
listeners : {
scope : me,
//select : me.onSelect,
cancelclick : me.hideMonthPicker,
okclick : me.onSelect,
yeardblclick : me.onSelect,
monthdblclick : me.onSelect
},
keyNavConfig : {
esc : function () {
me.collapse();
}
}
});
},
onSelect : function (picker, value) {
var me = this,
month = value[0],
year = value[1],
date = new Date(year, month);
if (date.getMonth() !== month) {
// 'fix' the JS rolling date conversion if needed
date = Ext.Date.getLastDateOfMonth(new Date(year, month));
}
me.setValue(date);
me.fireEvent('select', me, date);
me.collapse();
},
hideMonthPicker : function () {
var me = this;
me.collapse();
return me;
}
});
Ext.create('Ext.form.Panel', {
renderTo : Ext.getBody(),
width : 300,
bodyPadding : 10,
title : 'Dates',
items : [{
xtype : 'monthfield',
anchor : '100%',
fieldLabel : 'From',
name : 'from_date',
id : 'testmonth'
}, {
xtype : 'datefield',
anchor : '100%',
fieldLabel : 'To',
name : 'to_date',
id : 'testdate',
format:'Y-m-d',
value : new Date() // defaults to today
}
]
});
Ext.defer(function () {
Ext.getCmp('testmonth').setValue('2018-08');
}, 5000);
Ext.defer(function () {
alert(Ext.getCmp('testmonth').getValue());
alert(Ext.getCmp('testdate').getValue());
}, 10000);
