I guess this question has been asked a lot (as I found a few topics about it), but I still don't really know how to render a date picker, by only displaying month and year. I think I can do this differently:
Could you guys please guide me through what I should select, and give me any links I can refer to ?
Thanks in advance !
Sencha don't have this component, but something like this we are get it
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]);
}
});
...
Ext.create('Ext.form.field.Month', {
format: 'F, Y',
renderTo: Ext.getBody()
});
Fiddle example
Update to Extjs 5.1: Add to listeners:
afterrender : {
scope : me,
fn : function(c) {
var me = c;
me.el.on("mousedown", function(e) {
e.preventDefault();
}, c);
}
},
It prevent from lost blur of main field picker. In orginal version if you click on month picker it behave as it lost focus on date picker, so date picker hide all pickers.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With