如何覆盖现代DatePicker的extjs

时间:2017-02-16 07:18:05

标签: javascript extjs datepicker extjs6-modern

ExtJs 6.2.0现代工具包中,DatePicker非常奇怪 - 它有三个插槽(日,月,年)。但我真的需要知道每个日期的星期几,就像普通的日期选择器一样。

如何覆盖现有的DatePicker以突出显示周末或在日期编号附近写周日?

1 个答案:

答案 0 :(得分:0)

我刚刚使用自定义日期选择器解决了这个问题,该日期选择器会在每次更改广告位时更改日期文本。

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