How to override extjs modern DatePicker

Question

In ExtJs 6.2.0 modern toolkit, the DatePicker is quite strange - it has three slots (day, month, year). But I really need to know the day of week for each date, like in normal datepickers.

How can I override existing DatePicker to highlight weekends or to write day of week somewhere near the day number?

Answer 1

I just solved this issue by using a custom date picker that changes the day's text any time a slot is changed.

Ext.define('App.field.DateDayPicker', {
    extend: 'Ext.field.DatePicker',
    alias: 'widget.datepickerdayfield',

    requires: [
        'App.picker.DateDay'
    ],

    picker: {
        xtype: 'datepickerday'
    }
});

 

Ext.define('App.picker.DateDay', {
    extend: 'Ext.picker.Date',
    alias: 'widget.datepickerday',

    onSlotPick: function () {
        this.callParent(arguments);

        var value = this.getValue();
        var store = this.daySlot.getStore();

        store.each(function (day) {
            var dayDate = day.get('value');
            var year = value.getFullYear();
            var month = value.getMonth();
            var date = new Date(year, month, dayDate);
            var text = Ext.Date.format(date, 'j D');

            day.set('text', text);
        });
    }
});