CODEWITHSUNDEEP
extjs
Panzer
Panzer

Reputation: 13

datepickerfield automatically switching day and month when first digit is a 0 in ExtJS 6.7

So I noticed some weird behaviour and I can't figure out why it does what it does.

My datepickerfield is fairly simply:

xtype: 'datepickerfield',
name: 'birthday',
itemId: 'birthday',
label: 'Birthday',
dateFormat: 'd.m.Y',
required: true

It works as you would expect. You can click on the button to select a date with your mouse or write it in per hand. If you don't type in the delimiter yourself it tells you the value doesn't match the required format too.

However if you type in the date by hand and lead with a 0, say 01072025, it automatically converts it to 07.01.2025. So not just that it automatically places the delimiters, it also switches the day and month for some reason.

Why is that and how can I fix or stop that kind of behaviour? In case it's not coming from ExtJS itself, I had it occure in Chrome as well as in Edge (didn't bother to download other webbrowsers yet).

Upvotes: 1

Views: 98

Answers (1)

pvlt
pvlt

Reputation: 1863

This behavior is caused by the operation of the method parseValue in datafield component: 

...
   parseValue: function(value, errors) {
        var me = this,
            date = value,
            defaultFormat = me.getDateFormat(),
            altFormats = me.getAltFormats(),
            formats = altFormats ? [
                defaultFormat
            ].concat(altFormats) : [
                defaultFormat
            ],
            formatsLength = formats.length,
            i, format;
        if (date) {
            if (!Ext.isDate(date)) {
                for (i = 0; i < formatsLength; i++) {
                    format = formats[i];
                    date = Ext.Date.parse(value + ' ' + me.initTime, format + ' ' + me.initTimeFormat);
                    if (date) {
                        return Ext.Date.clearTime(date);
                    }
                }
            }
            if (date !== null) {
                return date;
            }
        }
        return this.callParent([
            value,
            errors
        ]);
    },
...

In this method component trying parse value and format value.

In altFormats parameter specifies formats from which formatting is possible. altFormats contains mdY. So when component trying to parse 01072025 it interpretate like mdY but not dmY. You must add dmY| to head of altFormats string to get what you want.

fiddle

Upvotes: 1

Related Questions