datetimefield 还剩月份初始化的问题没解决

src/controls/input/datetimefield.js

@@ -10,12 +10,12 @@ export default function () {
         alternateClassName: ['Ext.form.DateTimeField', 'Ext.form.DateTime'],
         triggerCls: Ext.baseCSSPrefix + 'form-arrow-trigger',
 
-        showTime : true,
+        showTime: true,
+        format: "Y-m-d H:i:s",
 
         constructor(config) {
             const newConfig = _.defaultsDeep({
                 // 强制属性
-                format: "Y-m-d H:i:s",
 
             }, baseConfig(config, 'col-item'), config, date)
 
@@ -23,13 +23,39 @@ export default function () {
         },
 
         getValue() {
-            const ov = this.superclass.getValue.call(this)
+            const ov = this.getRawValue(); //this.superclass.getValue.call(this)
             const nv = Ext.util.Format.date(ov, 'Y-m-d H:i:s')
             // console.log('cc:', nv, ov)
             return nv
         },
 
-        createPicker: function() {
+        onExpand: function () {
+            var strValue = this.getValue()
+            let value = Ext.Date.clearTime(new Date())
+            if (/^\d\d\d\d-\d\d-\d\d\s\d\d:\d\d:\d\d$/.test(strValue)) {
+                value = new Date(
+                    parseInt(strValue.substr(0, 4)),
+                    parseInt(strValue.substr(5, 2)) - 1,
+                    parseInt(strValue.substr(8, 2)),
+                    parseInt(strValue.substr(11, 2)),
+                    parseInt(strValue.substr(14, 2)),
+                    parseInt(strValue.substr(17, 2))
+                )
+
+            } else if (/^\d\d\d\d-\d\d-\d\d$/.test(strValue)) {
+                value = new Date(
+                    parseInt(strValue.substr(0, 4)),
+                    parseInt(strValue.substr(5, 2)) - 1,
+                    parseInt(strValue.substr(8, 2)),
+                )
+
+            } else {
+                value = Ext.Date.clearTime(new Date())
+            }
+            this.picker.setValue(value)
+        },
+
+        createPicker: function () {
             var me = this,
                 format = Ext.String.format;
 
@@ -58,7 +84,7 @@ export default function () {
                     select: me.onSelect
                 },
                 keyNavConfig: {
-                    esc: function() {
+                    esc: function () {
                         me.collapse();
                     }
                 }

src/controls/input/datetimepicker.js

@@ -6,6 +6,65 @@ export default function () {
         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);
@@ -56,6 +115,11 @@ export default function () {
                         const $input = $(sender.inputEl.dom)
                         handleInput(me.input1, $input)
                     },
+                    change(sender, e) {
+                        if (me.getValue()) {
+                            me.value.setHours(sender.getValue());
+                        }
+                    },
                 }
             });
 
@@ -73,12 +137,11 @@ export default function () {
                         const $input = $(sender.inputEl.dom)
                         handleInput(me.input2, $input)
                     },
-                    spindown() {
-
+                    change(sender, e) {
+                        if (me.getValue()) {
+                            me.value.setMinutes(sender.getValue());
+                        }
                     },
-                    spinup() {
-
-                    }
                 }
             });
 
@@ -96,12 +159,11 @@ export default function () {
                         const $input = $(sender.inputEl.dom)
                         handleInput(me.input3, $input)
                     },
-                    spindown() {
-
+                    change(sender, e) {
+                        if (me.getValue()) {
+                            me.value.setSeconds(sender.getValue());
+                        }
                     },
-                    spinup() {
-
-                    }
                 }
             });
 
@@ -141,51 +203,19 @@ export default function () {
                     }
                 ]
             });
-
-            //
-            // footerItems.push(Ext.create('Ext.container.Container', {
-            //     colspan: 3,
-            //     layout: {
-            //         type: 'table',
-            //         tableAttrs: {
-            //             align: 'center'
-            //         },
-            //         tdAttrs: {align: 'center'},
-            //         columns: 2
-            //     },
-            //     defaults: {},
-            //     items: [
-            //         me.confirmBtn,
-            //         me.tdBtn
-            //     ],
-            //     scope: me
-            // }));
-            //
-            //
-            // me.todayBtn = Ext.create('Ext.container.Container', {
-            //     layout: {
-            //         type: 'table',
-            //         tableAttrs: {
-            //             align: 'center'
-            //         },
-            //         tdAttrs: {align: 'center'},
-            //         columns: 4
-            //     },
-            //     items: footerItems,
-            //     scope: me
-            // });
         },
 
         // finishRenderChildren() {
         //     var me = this;
         //
-        //     // this.superclass.finishRenderChildren.call(this);
+        //     this.superclass.finishRenderChildren.call(this);
         //     //*
-        //     // me.hour.finishRender();
-        //     // me.minute.finishRender();
-        //     // me.second.finishRender();
+        //     me.input1.finishRender();
+        //     me.input2.finishRender();
+        //     me.input3.finishRender();
         //     //
-        //     // me.todayBtn.finishRender();
+        //     me.tdBtn.finishRender();
+        //     me.confirmBtn.finishRender();
         // },
 
         setValue(value) {
@@ -225,28 +255,25 @@ export default function () {
             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.setValue(new Date(t.dateValue));
-            //
-            //     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);
-            //     }
-            //     // event handling is turned off on hide
-            //     // when we are using the picker in a field
-            //     // therefore onSelect comes AFTER the select
-            //     // event.
-            //     me.onSelect();
-            // }
+            // 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 () {
@@ -255,7 +282,6 @@ export default function () {
                 handler = me.handler;
 
             if (btn && !btn.disabled) {
-                //me.setValue(Ext.Date.clearTime(new Date()));
                 me.value = new Date();
                 me.update(me.value);
 
@@ -283,11 +309,6 @@ export default function () {
             return me;
         },
 
-        /**
-         * Update the selected cell
-         * @private
-         * @param {Date} date The new date
-         */
         selectedUpdate: function (date) {
             var me = this,
                 //t         = date.getTime(),