[update] 多选日期编辑时不能清空

src/components/JMultipleDatePicker.vue

@@ -40,11 +40,15 @@ export default {
       console.log(val, '----watch--value-------')
       if (!val) {
         this.checkedValue = []
+        this.firstValue = null
         document.getElementById(this.fieldName).children[0].children[0].value = ''
         this.$emit('change', '')
       } else {
         this.checkedValue = val.split(',')
-        document.getElementById(this.fieldName).children[0].children[0].value = val
+        this.firstValue = this.checkedValue[0]
+        this.$nextTick(() => {
+          document.getElementById(this.fieldName).children[0].children[0].value = val
+        })
       }
     }
   },
@@ -56,6 +60,13 @@ export default {
     }
   },
   methods: {
+    // 面板头部切换日期的按钮部分点击事件，切换时会刷新dom，这里每次把刷新后的dom给改回多日期显示
+    calendarHeaderFn () {
+      this.firstValue = this.checkedValue[0]
+      this.$nextTick(() => {
+        document.getElementsByClassName(this.fieldName + '-drop')[0].children[0].children[0].children[0].children[0].children[0].value = this.checkedValue.join(',')
+      })
+    },
     handleOpenChange (open) {
       console.log(open)
       if (open) {
@@ -79,6 +90,9 @@ export default {
             picker.appendChild(outerWrapper)
           }
           setTimeout(() => {
+            // 日期面板头部点击事件(头部切换日期会重新渲染dom，这里绑定事件，头部切换的时候就把值再改回多日期)
+            console.log(`#${this.fieldName} .ant-calendar-header`, document.querySelector(`#${this.fieldName} .ant-calendar-header`))
+            document.querySelector(`#${this.fieldName} .ant-calendar-header`).addEventListener('click', this.calendarHeaderFn)
             document.getElementsByClassName(this.fieldName + '-drop')[0].children[0].children[0].children[0].children[0].children[0].value = this.checkedValue.join(',')
           }, 100)
         })