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:
- Create my own cuctom component (but I think my knowledge of Extjs is not good enough to be able to create a component which displays the month and year, and, when clicked, renders a year and month picker.
- Use some code found on google which creates a plugin (but I dont know how to use plugins in extjs ^^").
- Use a third library year and month picker to add in my extjs application.
Could you guys please guide me through what I should select, and give me any links I can refer to ?
Thanks in advance !
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:
- Create my own cuctom component (but I think my knowledge of Extjs is not good enough to be able to create a component which displays the month and year, and, when clicked, renders a year and month picker.
- Use some code found on google which creates a plugin (but I dont know how to use plugins in extjs ^^").
- Use a third library year and month picker to add in my extjs application.
Could you guys please guide me through what I should select, and give me any links I can refer to ?
Thanks in advance !
Share Improve this question edited Dec 15, 2015 at 10:15 JkSuf asked Jan 27, 2015 at 9:50 JkSufJkSuf 3431 gold badge6 silver badges23 bronze badges2 Answers
Reset to default 18Sencha 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.