fix 手动输入年代号“2017”回车之后还显示的是2023

src/components/jero/JDate.vue

@@ -1,84 +1,45 @@
 <template>
-  <span>
-    <!--YYYY-MM-DD HH:mm:ss-->
-    <a-date-picker
-      v-if="showType === 'time'"
-      dropdownClassName="j-date-picker"
-      :disabled="disabled || readOnly"
-      :placeholder="placeholder"
-      @change="handleDateChange"
-      :value="momVal"
-      :showTime="true"
-      :format="dateFormat"
-      style="width: 100%"
-      v-bind="$attrs"
-      v-on="childListeners"
-      :getCalendarContainer="getCalendarContainer">
-    </a-date-picker>
-    <!--YYYY-MM-DD-->
-    <a-date-picker
-      v-if="showType === 'day'"
-      dropdownClassName="j-date-picker"
-      :disabled="disabled || readOnly"
-      :placeholder="placeholder"
-      @change="handleDateChange"
-      :value="momVal"
-      :showTime="false"
-      :format="dateFormat"
-      style="width: 100%"
-      v-bind="$attrs"
-      v-on="childListeners"
-      :getCalendarContainer="getCalendarContainer">
-    </a-date-picker>
-    <!--YYYY-MM-->
-    <a-month-picker
-      v-if="showType === 'month'"
-      :placeholder="placeholder"
-      :value="momVal"
-      :disabled="disabled || readOnly"
-      :format="dateFormat"
-      style="width: 100%"
-      v-bind="$attrs"
-      v-on="childListeners"
-      @change="handleMonthChange">
-    </a-month-picker>
-    <!--YYYY-->
-    <a-date-picker
-      v-if="showType === 'year'"
-      :placeholder="placeholder"
-      mode="year"
-      :format="dateFormat"
-      :value="year"
-      :disabled="disabled || readOnly"
-      :open="yearShowOne"
-      v-bind="$attrs"
-      v-on="childListeners"
-      :getCalendarContainer="getCalendarContainer"
-      style="width: 100%"
-      @openChange="openChangeOne"
-      @panelChange="panelChangeOne">
-    </a-date-picker>
-  </span>
+  <a-date-picker
+    :disabledDate="disabledDate"
+    :disabled="disabled || readOnly"
+    :placeholder="placeholder"
+    @change="handleDateChange"
+    :value="momVal"
+    :showTime="showTime"
+    :format="dateFormat"
+    :mode="mode"
+    :getCalendarContainer="getCalendarContainer"
+    style="width: 100%" />
 </template>
 <script>
 import moment from 'moment'
+
 export default {
   name: 'JDate',
   props: {
     placeholder: {
       type: String,
-      default: '请选择',
+      default: '',
       required: false
     },
     value: {
       type: String,
       required: false
     },
+    disabledDate: {
+      type: Function
+    },
     dateFormat: {
       type: String,
       default: 'YYYY-MM-DD',
       required: false
     },
+    // 此属性可以被废弃了
+    triggerChange: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     readOnly: {
       type: Boolean,
       required: false,
@@ -89,90 +50,70 @@ export default {
       required: false,
       default: false
     },
-    // 控制选择时分秒
-    showType: {
-      type: String,
+    showTime: {
+      type: Boolean,
       required: false,
-      default: 'time'
+      default: false
     },
     getCalendarContainer: {
       type: Function,
       default: (node) => node.parentNode
+    },
+    showType: {
+      type: String,
+      required: false,
+      default: 'time'
     }
   },
   data () {
     const dateStr = this.value
     return {
-      yearShowOne: false, // 控制年份模态框的显示与否
-      year: '', // mode==“year” 专用
+      decorator: '',
       momVal: !dateStr ? null : moment(dateStr, this.dateFormat)
     }
   },
   computed: {
-    // 透传给下级组件的事件，需要排除本组件使用的change事件
-    childListeners () {
-      const result = Object.assign({},
-        this.$listeners
-      )
-      delete result.change
-      return result
+    mode () {
+      if (this.showType === 'time') {
+        return 'time'
+      }
+      if (this.showType === 'day') {
+        return 'date'
+      }
+      if (this.showType === 'month') {
+        return 'month'
+      }
+      if (this.showType === 'year') {
+        return 'year'
+      }
+      return 'date'
     }
   },
   watch: {
     value (val) {
-      console.log(val)
-      const fm = this.dateFormat
-      moment.prototype.toJSON = function () {
-        return moment(this).format(fm)
-      }
       if (!val) {
-        if (this.showType === 'year') {
-          this.year = null
-        } else {
-          this.momVal = null
-        }
+        this.momVal = null
       } else {
-        if (this.showType === 'year') {
-          this.year = val
-        } else {
-          this.momVal = moment(val, this.dateFormat)
-        }
+        this.momVal = moment(val, this.dateFormat)
       }
     }
   },
   methods: {
     moment,
     handleDateChange (mom, dateStr) {
+      console.log('handleDateChange----', dateStr)
       this.$emit('change', dateStr)
-    },
-    handleMonthChange (mom, dateStr) {
-      this.$emit('change', dateStr)
-    },
-    /**
-       * 弹出日历和关闭日历的回调
-       * status：打开或关闭的状态
-       * */
-    openChangeOne (status) {
-      this.yearShowOne = status
-    },
-    // 得到年份选择器的值
-    panelChangeOne (value) {
-      this.yearShowOne = false
-      const year = moment(value, this.dateFormat).year().toString() // 处理成字符串
-      this.year = value // 组件显示的
-      this.$emit('change', year)
     }
   },
-  // 2.2新增 在组件内定义 指定父组件调用时候的传值属性和事件类型
+  // 2.2新增 在组件内定义 指定父组件调用时候的传值属性和事件类型 这个牛逼
   model: {
     prop: 'value',
     event: 'change'
   }
 }
 </script>
-
-<style scoped>
-.ant-calendar-picker {
-  /*min-width: 195px;*/
+<style lang="less" scoped>
+/deep/ .ant-input {
+  padding: 4px 6px;
 }
 </style>