javascript - 如何覆盖 extjs 现代 DatePicker

Question

在ExtJs 6.2.0 现代工具包中，DatePicker 很奇怪——它有三个插槽（日、月、年）。但我真的需要知道每个日期的星期几，就像在普通的日期选择器中一样。

如何覆盖现有的 DatePicker 以突出显示周末或在日期编号附近的某处写入星期几？

Answer 1

我刚刚通过使用自定义日期选择器解决了这个问题，该选择器可以在任何时间更改插槽时更改当天的文本。

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