Browse Source

日期框 右侧图标问题/默认填当前时间/默认不弹出

luoyifan 3 years ago
parent
commit
e2b52b1159

+ 16 - 10
src/controls/input/datefield.js

@@ -60,21 +60,27 @@ export default function () {
             this.on({
                 afterrender() {
                     const {config} = this
-                    $(this.el.dom).on('click', toggle.bind(this))
+                    // 日期框,不要默认弹出
+                    // $(this.el.dom).on('click', toggle.bind(this))
                 },
                 destory() {
-                    $(this.el.dom).off('click', toggle.bind(this))
+                    // 日期框,不要默认弹出
+                    // $(this.el.dom).off('click', toggle.bind(this))
                 },
                 change: {
                     fn(sender) {
-                        const value = sender.getRawValue()
-                        if (/^\d{8}$/.test(value)) {
-                            const newValue = [
-                                value.substr(0, 4),
-                                value.substr(4, 2),
-                                value.substr(6, 2)
-                            ].join('-')
-                            sender.setValue(newValue)
+                        if (sender.format === 'Y-m-d') {
+                            // 年月日格式
+                            const value = sender.getRawValue()
+                            if (/^\d{8}$/.test(value)) {
+                                // 8位数字,自动转换为 YYYY-MM-DD
+                                const newValue = [
+                                    value.substr(0, 4),
+                                    value.substr(4, 2),
+                                    value.substr(6, 2)
+                                ].join('-')
+                                sender.setValue(newValue)
+                            }
                         }
                     },
                 }

+ 53 - 1
src/controls/input/datetimefield.js

@@ -22,6 +22,57 @@ export default function () {
             this.superclass.constructor.call(this, newConfig)
         },
 
+        initComponent() {
+            this.superclass.initComponent.call(this)
+
+            const setInitValue = function () {
+                const value = this.getRawValue()
+                if (!value) {
+                    // 没填内容的时候,自动设置当前时间
+                    this.setValue(
+                        Ext.util.Format.date(new Date(), this.format)
+                    )
+                }
+            }
+
+            this.on({
+                afterrender() {
+                    const {config} = this
+                    // 日期框,不要默认弹出
+                    $(this.el.dom).on('click', setInitValue.bind(this))
+                },
+                destory() {
+                    // 日期框,不要默认弹出
+                    $(this.el.dom).off('click', setInitValue.bind(this))
+                },
+                change: {
+                    fn(sender) {
+                        if (sender.format === "Y-m-d H:i:s") {
+                            // 年月日格式
+                            const value = sender.getRawValue()
+                            if (/^\d{14}$/.test(value)) {
+                                // 8位数字,自动转换为 YYYY-MM-DD
+                                const newValue = [
+                                    value.substr(0, 4),
+                                    '-',
+                                    value.substr(4, 2),
+                                    '-',
+                                    value.substr(6, 2),
+                                    ' ',
+                                    value.substr(8, 2),
+                                    ':',
+                                    value.substr(10, 2),
+                                    ':',
+                                    value.substr(12, 2)
+                                ].join('')
+                                sender.setValue(newValue)
+                            }
+                        }
+                    },
+                }
+            })
+        },
+
         getValue() {
             const ov = this.getRawValue(); //this.superclass.getValue.call(this)
             const nv = Ext.util.Format.date(ov, 'Y-m-d H:i:s')
@@ -50,7 +101,8 @@ export default function () {
                 )
 
             } else {
-                value = Ext.Date.clearTime(new Date())
+                // value = Ext.Date.clearTime(new Date())
+                value = new Date()
             }
             this.picker.setValue(value)
         },

+ 25 - 11
src/controls/input/datetimepicker.js

@@ -72,16 +72,18 @@ export default function () {
             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;
-                    }
-
+                const $dom = $(extHandle.el.dom)
+                // const $up = $dom.find('.x-form-spinner-up')
+                // const $down = $dom.find('.x-form-spinner-down')
+                // debugger
+                // $up.on('mousedown', () => {
+                //     debugger
+                // });
+                // $up.on('click', () => {
+                //     debugger
+                // });
+
+                const changeValue = (delta) => {
                     if (_.trim(extHandle.getValue()) === '') {
                         extHandle.setValue(extHandle.minValue)
                     } else {
@@ -96,6 +98,18 @@ export default function () {
                             extHandle.setValue(v + delta)
                         }
                     }
+                }
+
+                $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;
+                    }
+                    changeValue(delta)
                     // console.log('delta', delta)
                     // $input.focus()
                 })
@@ -183,7 +197,7 @@ export default function () {
             });
 
             me.tdBtn = new Ext.button.Button({
-                text: '今天',
+                text: '现在',
                 handler: me.selectToday,
                 scope: me
             });

+ 5 - 0
src/wotu-ui.css

@@ -3,6 +3,11 @@
     display: none;
 }
 
+/** 日期弹出框右侧下拉框,是日期图标 **/
+.x-form-field-date .x-form-arrow-trigger:before {
+    content: "\f073" !important;
+}
+
 /** 日期弹出框底部,不要出现数字+1-1的滑动条 **/
 .x-datepicker-footer .x-form-trigger-spinner {
     display: none;