UniDateTimePicker

[picyka]

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.

[Sherzod]

Hello,

Need to analyze. 

[Sherzod]

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

 

[picyka]

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.

[picyka]

when I grow up I want to know all this about JS

 

😃

[Sherzod]

Have you tested? Works?

[Sherzod]

[picyka]

4 minutos atrás, Sherzod disse:

Você já testou? Obras?

Yes, perfect as I wanted.

[Tokay]

Great solution! Does it possible to create only year selector?

[Sherzod]

5 minutes ago, Tokay said:

Great solution! Does it possible to create only year selector?

Thanks. Yes, I think. Need to check.

[Sherzod]

42 minutes ago, Tokay said:

Does it possible to create only year selector?

[Tokay]

Wow! And how to do such mode?

[Sherzod]

I will post. 

[Sherzod]

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

 

[Tokay]

Thank you! Works as expected.

[Tokay]

A bit issue. Does it possible to sort years?

[Sherzod]

4 minutes ago, Tokay said:

Does it possible to sort years?

Sorry? 

[Tokay]

Selector looks like that here

[Tokay]

I understand what's happend. I've used laLeft FieldLabelAlign and picker is too wide.

[Tokay]

Fortunatelly it's not a big issue. I've redisigned the form.

[picyka]

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

[Sherzod]

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? 

[picyka]

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..

[Sherzod]

Yes, you should use the altFormat config.

[picyka]

3 minutos atrás, Sherzod disse:

Sim, você deve usar o altFormat config.

Yes, it is used as well.