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. Quote 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 Quote 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]); }; } Quote 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 Quote 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 😃 Quote Link to comment Share on other sites More sharing options...
Sherzod Posted January 18, 2022 Share Posted January 18, 2022 Have you tested? Works? Quote Link to comment Share on other sites More sharing options...
Sherzod Posted January 18, 2022 Share Posted January 18, 2022 Quote 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 Quote 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? Quote 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. Quote 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 Quote 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? Quote Link to comment Share on other sites More sharing options...
Sherzod Posted January 18, 2022 Share Posted January 18, 2022 I will post. Quote 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 Quote 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. Quote 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? Quote 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? Quote 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 Quote 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. Quote 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. Quote 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 Quote 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? Quote 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.. Quote 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. Quote 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.