All geek questions in one place

EXTJS 5 - select date only year and month

I think this question was asked very often (since I found several topics about it), but I still do not know how to make a date selection, only displaying the month and year. I think I can do it differently:

  • Build your own cuctom component (but I think my knowledge of Extjs is not good enough to be able to create a component that displays the month and year, and when clicked, displays the collector year and month.
  • Use the code found in google that creates the plugin (but I don’t know how to use plugins in extjs ^^ ").
  • Use the third year for the collector year and month to add extjs to my application.

Could you guys guide me through what I have to choose and give me any links that I can link to?

Thanks in advance!

+5
source share
2 answers

Sencha does not have this component, but something like this we get

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() });

Script example

+15
source

Upgrade 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); } },

This prevents the loss of blurring of the main field. In the original version, if you click on the month picker, it will behave as if it had lost focus on choosing a date, so all pickers will hide the date choice.

+5
source

Source: https://habr.com/ru/post/1211984/

More articles:


All Articles