picyka Posted January 18, 2022 Share Posted January 18, 2022 Good morning, in the date component DateFormt property I use like this "MM/yyyy" I would like if possible, when the user goes to the calendar, he only sees the month and year, would it be possible? an example attached. Link to comment Share on other sites More sharing options...
Sherzod Posted January 18, 2022 Share Posted January 18, 2022 Hello, Need to analyze. 1 Link to comment Share on other sites More sharing options...
Sherzod Posted January 18, 2022 Share Posted January 18, 2022 3 hours ago, picyka said: Similar Solution. UniDateTimePicker.ClientEvent.UniEvents -> function beforeInit(sender, config) { config.selectMonth = null; config.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(); } } }); }; config.onCancelClick = function() { var me = this; me.selectMonth = null; me.collapse(); }; config.onOKClick = function() { var me = this; if (me.selectMonth) { me.setValue(me.selectMonth); me.fireEvent('select', me, me.selectMonth); } me.collapse(); }; config.onSelect = function(m, d) { var me = this; me.selectMonth = new Date((d[0] + 1) + '/1/' + d[1]); }; } Link to comment Share on other sites More sharing options...
picyka Posted January 18, 2022 Author Share Posted January 18, 2022 10 minutes ago, Sherzod said: Solução similar. UniDateTimePicker.ClientEvent.UniEvents -> function beforeInit(sender, config) { config.selectMonth = null; config.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(); } } }); }; config.onCancelClick = function() { var me = this; me.selectMonth = null; me.collapse(); }; config.onOKClick = function() { var me = this; if (me.selectMonth) { me.setValue(me.selectMonth); me.fireEvent('select', me, me.selectMonth); } me.collapse(); }; config.onSelect = function(m, d) { var me = this; me.selectMonth = new Date((d[0] + 1) + '/1/' + d[1]); }; } uuuuuuuuuuuu very very good the best support on the planet Hug. 1 Link to comment Share on other sites More sharing options...
picyka Posted January 18, 2022 Author Share Posted January 18, 2022 when I grow up I want to know all this about JS 😃 Link to comment Share on other sites More sharing options...
Sherzod Posted January 18, 2022 Share Posted January 18, 2022 Have you tested? Works? Link to comment Share on other sites More sharing options...
Sherzod Posted January 18, 2022 Share Posted January 18, 2022 Link to comment Share on other sites More sharing options...
picyka Posted January 18, 2022 Author Share Posted January 18, 2022 4 minutos atrás, Sherzod disse: Você já testou? Obras? Yes, perfect as I wanted. 1 Link to comment Share on other sites More sharing options...
Tokay Posted January 18, 2022 Share Posted January 18, 2022 Great solution! Does it possible to create only year selector? Link to comment Share on other sites More sharing options...
Sherzod Posted January 18, 2022 Share Posted January 18, 2022 5 minutes ago, Tokay said: Great solution! Does it possible to create only year selector? Thanks. Yes, I think. Need to check. Link to comment Share on other sites More sharing options...
Sherzod Posted January 18, 2022 Share Posted January 18, 2022 42 minutes ago, Tokay said: Does it possible to create only year selector? 1 Link to comment Share on other sites More sharing options...
Tokay Posted January 18, 2022 Share Posted January 18, 2022 Wow! And how to do such mode? Link to comment Share on other sites More sharing options...
Sherzod Posted January 18, 2022 Share Posted January 18, 2022 I will post. Link to comment Share on other sites More sharing options...
Sherzod Posted January 19, 2022 Share Posted January 19, 2022 8 hours ago, Tokay said: And ho to do such mode? function beforeInit(sender, config) { config.selectMonth = null; config.createPicker = function() { var me = this, format = Ext.String.format; return Ext.create('Ext.picker.Month', { width: config.width, renderTpl: [ '<div id="{id}-bodyEl" data-ref="bodyEl" class="{baseCls}-body">', '<div style="display:none" id="{id}-monthEl" data-ref="monthEl" class="{baseCls}-months">', '<tpl for="months">', '<div class="{parent.baseCls}-item {parent.baseCls}-month">', '<a style="{parent.monthStyle}" role="button" hidefocus="on" class="{parent.baseCls}-item-inner">{.}</a>', '</div>', '</tpl>', '</div>', '<div style="width:100%" id="{id}-yearEl" data-ref="yearEl" class="{baseCls}-years">', '<div class="{baseCls}-yearnav">', '<div class="{baseCls}-yearnav-button-ct">', '<a id="{id}-prevEl" data-ref="prevEl" class="{baseCls}-yearnav-button {baseCls}-yearnav-prev" hidefocus="on" role="button"></a>', '</div>', '<div class="{baseCls}-yearnav-button-ct">', '<a id="{id}-nextEl" data-ref="nextEl" class="{baseCls}-yearnav-button {baseCls}-yearnav-next" hidefocus="on" role="button"></a>', '</div>', '</div>', '<tpl for="years">', '<div class="{parent.baseCls}-item {parent.baseCls}-year">', '<a hidefocus="on" class="{parent.baseCls}-item-inner" role="button">{.}</a>', '</div>', '</tpl>', '</div>', '<div class="' + Ext.baseCSSPrefix + 'clear"></div>', '<tpl if="showButtons">', '<div class="{baseCls}-buttons">{%', 'var me=values.$comp, okBtn=me.okBtn, cancelBtn=me.cancelBtn;', 'okBtn.ownerLayout = cancelBtn.ownerLayout = me.componentLayout;', 'okBtn.ownerCt = cancelBtn.ownerCt = me;', 'Ext.DomHelper.generateMarkup(okBtn.getRenderTree(), out);', 'Ext.DomHelper.generateMarkup(cancelBtn.getRenderTree(), out);', '%}</div>', '</tpl>', '</div>' ], 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(); } } }); }; config.onCancelClick = function() { var me = this; me.selectMonth = null; me.collapse(); }; config.onOKClick = function() { var me = this; if (me.selectMonth) { me.setValue(me.selectMonth); me.fireEvent('select', me, me.selectMonth); } me.collapse(); }; config.onSelect = function(m, d) { var me = this; me.selectMonth = new Date((d[0] + 1) + '/1/' + d[1]); }; } 1 Link to comment Share on other sites More sharing options...
Tokay Posted January 19, 2022 Share Posted January 19, 2022 Thank you! Works as expected. Link to comment Share on other sites More sharing options...
Tokay Posted January 19, 2022 Share Posted January 19, 2022 A bit issue. Does it possible to sort years? Link to comment Share on other sites More sharing options...
Sherzod Posted January 19, 2022 Share Posted January 19, 2022 4 minutes ago, Tokay said: Does it possible to sort years? Sorry? Link to comment Share on other sites More sharing options...
Tokay Posted January 19, 2022 Share Posted January 19, 2022 Selector looks like that here Link to comment Share on other sites More sharing options...
Tokay Posted January 19, 2022 Share Posted January 19, 2022 I understand what's happend. I've used laLeft FieldLabelAlign and picker is too wide. Link to comment Share on other sites More sharing options...
Tokay Posted January 19, 2022 Share Posted January 19, 2022 Fortunatelly it's not a big issue. I've redisigned the form. Link to comment Share on other sites More sharing options...
picyka Posted February 4, 2022 Author Share Posted February 4, 2022 Em 18/1/2022 às 14h56, Picyka disse: Sim, perfeito como eu queria. I was using this customization here, and I discovered something, if you just type the month and give a tab, it doesn't respect the typed month, always getting the correct month 02/2022, now I type for example "01/22" it works Link to comment Share on other sites More sharing options...
Sherzod Posted February 4, 2022 Share Posted February 4, 2022 1 hour ago, picyka said: I was using this customization here, and I discovered something, if you just type the month and give a tab, it doesn't respect the typed month, always getting the correct month 02/2022, now I type for example "01/22" it works And without this customization? Link to comment Share on other sites More sharing options...
picyka Posted February 4, 2022 Author Share Posted February 4, 2022 This date field always had a little problem, Self.ClientEvents.UniEvents.Values['beforeInit'] := 'function beforeInit(sender, config){ config.altFormats="dmY|d/m/Y|j/n/Y|j/n/y|j/m/y|d/m/y|j/m/Y|d/n/Y|dmy|dmY|d/m|dm|dm|dmy|dmY|d|dmY|jn|j/n"; }'; so I do this, even taking that away, the same thing happens.. Link to comment Share on other sites More sharing options...
Sherzod Posted February 4, 2022 Share Posted February 4, 2022 Yes, you should use the altFormat config. Link to comment Share on other sites More sharing options...
picyka Posted February 4, 2022 Author Share Posted February 4, 2022 3 minutos atrás, Sherzod disse: Sim, você deve usar o altFormat config. Yes, it is used as well. Link to comment Share on other sites More sharing options...
Recommended Posts
Please sign in to comment
You will be able to leave a comment after signing in
Sign In Now