iView DatePicker v-model和@on-change同时使用的坑

iView DatePicker v-model和@on-change同时使用,在选择日期使用时无问题，但是通过日期输入框手动输入日期后存在问题，特此记录。

1. 环境

"iview": "^3.5.4",
"vue": "^2.6.14"

2. 问题描述

我想选择日期向后端发送2022-11-01这种格式的String，而不是发送Date。
测试页面很简单，一个日期框+input框+查询按钮，input框和日期框绑定的同一个元素，用来展示日期的值，点击查询按钮弹出提示框提示日期的值。

• 首先正常选择日期，日期是正常的。
  
• 通过日期输入框输入后，日期on-change不生效，还是Date类型。
  

3. 解决办法

发现了问题，就会发现解决方法其实有很多。

1. 日期文本框不可输入:editable="false"
2. 在提交的时候判断为Date类型则format

if (util.typeOf(date) === 'date') {
    date =date.Format('yyyy-MM-dd')
}

3. 使用 :value代替v-model 我更喜欢这种解决方法。

<DatePicker :value="searchDate"  @on-change="searchDateChange"> </DatePicker>

4.源代码

<template>
  <div>
    <h1>Date Test</h1>
    <Row>
      <DatePicker
          type="date"
          v-model="searchDate"
          @on-change="searchDateChange"
          placeholder="选择查询日期"
          :clearable="false"
      >
      </DatePicker>
      <Input  style="margin-left: 20px;width: 320px" v-model="searchDate"></Input>
      <Button type="primary" @click="doSearch" style="margin-left: 20px">查询</Button>
    </Row>
  </div>
</template>
<script>
export default {
  name: 'MainTest',
  data(){
    return{
      searchDate:'2022-11-01'
    }
  },
  methods:{
    searchDateChange(value){
      this.searchDate = value
      console.log(this.searchDate)
    },
    doSearch(){
      this.$Message.info(this.searchDate+'');
      console.log(this.searchDate)
    }
  }
}
</script>