yvan-ext/src/controls/input/datetimepicker.js

import _ from 'lodash'

export default function () {
    Ext.define('Yvan.DateTimePicker', {
        extend: 'Ext.picker.Date',
        alias: 'datetimepicker',
        alternateClassName: 'Ext.DateTimePicker',

        renderTpl: [
            '<div id="{id}-innerEl" data-ref="innerEl" role="presentation">',
            '<div class="{baseCls}-header">',
            '<div id="{id}-prevEl" data-ref="prevEl" class="{baseCls}-prev {baseCls}-arrow" role="presentation" title="{prevText}"></div>',
            '<div id="{id}-middleBtnEl" data-ref="middleBtnEl" class="{baseCls}-month" role="heading">{%this.renderMonthBtn(values, out)%}</div>',
            '<div id="{id}-nextEl" data-ref="nextEl" class="{baseCls}-next {baseCls}-arrow" role="presentation" title="{nextText}"></div>',
            '</div>',
            '<table role="grid" id="{id}-eventEl" data-ref="eventEl" class="{baseCls}-inner" cellspacing="0" tabindex="0" aria-readonly="true">',
            '<thead>',
            '<tr role="row">',
            '<tpl for="dayNames">',
            '<th role="columnheader" class="{parent.baseCls}-column-header" aria-label="{.}">',
            '<div role="presentation" class="{parent.baseCls}-column-header-inner">{.:this.firstInitial}</div>',
            '</th>',
            '</tpl>',
            '</tr>',
            '</thead>',
            '<tbody>',
            '<tr role="row">',
            '<tpl for="days">',
            '{#:this.isEndOfWeek}',
            '<td role="gridcell">',
            '<div hidefocus="on" class="{parent.baseCls}-date"></div>',
            '</td>',
            '</tpl>',
            '</tr>',
            '</tbody>',
            '</table>',
            '<tpl if="showToday">',
            '<div id="{id}-footerEl" data-ref="footerEl" role="presentation" class="{baseCls}-footer">{%this.renderTodayBtn(values, out)%}</div>',
            '</tpl>',
            // These elements are used with Assistive Technologies such as screen readers
            '<div id="{id}-todayText" class="' + Ext.baseCSSPrefix + 'hidden-clip">{todayText}.</div>',
            '<div id="{id}-ariaMinText" class="' + Ext.baseCSSPrefix + 'hidden-clip">{ariaMinText}.</div>',
            '<div id="{id}-ariaMaxText" class="' + Ext.baseCSSPrefix + 'hidden-clip">{ariaMaxText}.</div>',
            '<div id="{id}-ariaDisabledDaysText" class="' + Ext.baseCSSPrefix + 'hidden-clip">{ariaDisabledDaysText}.</div>',
            '<div id="{id}-ariaDisabledDatesText" class="' + Ext.baseCSSPrefix + 'hidden-clip">{ariaDisabledDatesText}.</div>',
            '</div>',
            {
                firstInitial: function (value) {
                    return Ext.picker.Date.prototype.getDayInitial(value);
                },
                isEndOfWeek: function (value) {
                    // convert from 1 based index to 0 based
                    // by decrementing value once.
                    value--;
                    // eslint-disable-next-line vars-on-top
                    var end = value % 7 === 0 && value !== 0;
                    return end ? '</tr><tr role="row">' : '';
                },
                renderTodayBtn: function (values, out) {
                    Ext.DomHelper.generateMarkup(values.$comp.todayBtn.getRenderTree(), out);
                },
                renderMonthBtn: function (values, out) {
                    Ext.DomHelper.generateMarkup(values.$comp.monthBtn.getRenderTree(), out);
                }
            }
        ],

        beforeRender() {
            var me = this,
                today = Ext.Date.format(new Date(), me.format);

            this.superclass.beforeRender.call(this)

            function handleInput(extHandle, $input) {
                $input.on('mousewheel', (e) => {
                    e.stopPropagation()
                    const event = e.originalEvent
                    let delta = 0
                    if (event.wheelDelta) {
                        delta = event.wheelDelta / 120;
                    } else if (event.detail) {
                        delta = -event.detail / 3;
                    }

                    if (_.trim(extHandle.getValue()) === '') {
                        extHandle.setValue(extHandle.minValue)
                    } else {
                        const v = parseInt('' + extHandle.getValue())
                        if (v + delta > extHandle.maxValue) {
                            extHandle.setValue(extHandle.minValue)

                        } else if (v + delta < extHandle.minValue) {
                            extHandle.setValue(extHandle.maxValue)

                        } else {
                            extHandle.setValue(v + delta)
                        }
                    }
                    // console.log('delta', delta)
                    // $input.focus()
                })
            }

            me.input1 = Ext.create('Ext.form.field.Number', {
                minValue: 0,
                maxValue: 23,
                flex: 1,
                enableKeyEvents: true,
                fieldLabel: '时',
                labelWidth: 20,
                hideLabel: true,
                spinDownEnabled: false,
                spinUpEnabled: false,
                style: {
                    marginLeft: '5px',
                },
                listeners: {
                    afterrender(sender) {
                        const $input = $(sender.inputEl.dom)
                        handleInput(me.input1, $input)
                    },
                    change(sender, e) {
                        if (me.getValue()) {
                            me.value.setHours(sender.getValue());
                        }
                    },
                }
            });

            me.input2 = Ext.create('Ext.form.field.Number', {
                minValue: 0,
                maxValue: 59,
                flex: 1,
                enableKeyEvents: true,
                fieldLabel: ' ',
                hideLabel: false,
                labelWidth: 8,
                spinDownEnabled: false,
                spinUpEnabled: false,
                listeners: {
                    afterrender(sender) {
                        const $input = $(sender.inputEl.dom)
                        handleInput(me.input2, $input)
                    },
                    change(sender, e) {
                        if (me.getValue()) {
                            me.value.setMinutes(sender.getValue());
                        }
                    },
                }
            });

            me.input3 = Ext.create('Ext.form.field.Number', {
                minValue: 0,
                maxValue: 59,
                flex: 1,
                enableKeyEvents: true,
                fieldLabel: ' ',
                hideLabel: false,
                labelWidth: 8,
                spinDownEnabled: false,
                spinUpEnabled: false,
                style: {
                    marginRight: '5px',
                },
                listeners: {
                    afterrender(sender) {
                        const $input = $(sender.inputEl.dom)
                        handleInput(me.input3, $input)
                    },
                    change(sender, e) {
                        if (me.getValue()) {
                            me.value.setSeconds(sender.getValue());
                        }
                    },
                }
            });

            me.confirmBtn = new Ext.button.Button({
                text: '确认',
                handler: me.confirmClick,
                scope: me
            });

            me.tdBtn = new Ext.button.Button({
                text: '今天',
                handler: me.selectToday,
                scope: me
            });

            me.todayBtn = Ext.create('Ext.container.Container', {
                layout: 'anchor', border: false,
                defaults: {
                    border: false, anchor: '100%',
                    margin: '0 0 5 0',
                },
                items: [
                    {
                        layout: 'hbox',
                        items: [
                            me.input1,
                            me.input2,
                            me.input3,
                        ]
                    },
                    {
                        layout: 'hbox',
                        items: [
                            me.confirmBtn,
                            me.tdBtn,
                        ]
                    }
                ]
            });
        },

        // finishRenderChildren() {
        //     var me = this;
        //
        //     this.superclass.finishRenderChildren.call(this);
        //     //*
        //     me.input1.finishRender();
        //     me.input2.finishRender();
        //     me.input3.finishRender();
        //     //
        //     me.tdBtn.finishRender();
        //     me.confirmBtn.finishRender();
        // },

        setValue(value) {
            //this.value = Ext.Date.clearTime(value, true);
            this.value = value;
            this.input1.setValue(this.value.getHours());
            this.input2.setValue(this.value.getMinutes());
            this.input3.setValue(this.value.getSeconds());
            return this.update(this.value);
        },

        selectDate: function (value) {
            if (this.showTime) {
                value.setHours(this.input1.getValue());
                value.setMinutes(this.input2.getValue());
                value.setSeconds(this.input3.getValue());
            }
            this.value = value;
            return this.update(this.value);
        },

        setDisabledStatus: function (disabled) {
            var me = this;

            debugger
            // me.callParent();

            if (me.showTime) {
                me.confirmBtn.setDisabled(disabled);
            }
            if (me.isShowFooter()) {
                me.footerContainer.setDisabled(disabled);
            }
        },

        handleDateClick: function (e, t) {
            var me = this,
                handler = me.handler;

            // e.stopEvent();
            if (!me.disabled && t.dateValue && !Ext.fly(t.parentNode).hasCls(me.disabledCellCls)) {
                me.doCancelFocus = me.focusOnSelect === false;

                me.selectDate(new Date(t.dateValue));

                delete me.doCancelFocus;

                /* 有时间输入时单击事件不退出选择，只移动光标 */
                if (me.showTime) {
                    return;
                }

                me.fireEvent('select', me, me.value);
                if (handler) {
                    handler.call(me.scope || me, me, me.value);
                }
                me.onSelect();
            }
        },

        selectToday: function () {
            var me = this,
                btn = me.todayBtn,
                handler = me.handler;

            if (btn && !btn.disabled) {
                me.value = new Date();
                me.update(me.value);

                me.fireEvent('select', me, me.value);
                if (handler) {
                    handler.call(me.scope || me, me, me.value);
                }
                me.onSelect();
            }
            return me;
        },

        confirmClick: function () {
            var me = this,
                btn = me.confirmBtn,
                handler = me.handler;

            if (btn && !btn.disabled) {
                me.fireEvent('select', me, me.value);
                if (handler) {
                    handler.call(me.scope || me, me, me.value);
                }
                me.onSelect();
            }
            return me;
        },

        selectedUpdate: function (date) {
            var me = this,
                //t         = date.getTime(),
                t = Ext.Date.clearTime(date, true).getTime(),
                cells = me.cells,
                cls = me.selectedCls,
                cellItems = cells.elements,
                c,
                cLen = cellItems.length,
                cell;

            cells.removeCls(cls);

            for (c = 0; c < cLen; c++) {
                cell = Ext.fly(cellItems[c]);

                if (cell.dom.firstChild.dateValue == t) {
                    me.fireEvent('highlightitem', me, cell);
                    cell.addCls(cls);

                    if (me.isVisible() && !me.doCancelFocus) {
                        Ext.fly(cell.dom.firstChild).focus(50);
                    }

                    break;
                }
            }
        },

        // private, inherit docs
        beforeDestroy: function () {
            var me = this;

            if (me.rendered) {
                Ext.destroy(
                    me.input1,
                    me.input2,
                    me.input3,
                    me.confirmBtn,
                    me.tdBtn,
                    me.todayBtn
                );
            }
            me.superclass.beforeDestroy.call(this)
        }
    })
}