ivew日期选择器，双向绑定日期格式，执行回调后不改变格式

实现的效果如下：

初始选择日期后，绑定的日期数据显示在日期选择器下方（即开始日期、结束日期）：

 点击查询后，发现开始日期 晚过 结束日期，自动交换日期，且日期格式不变：

 代码：

注意使用 :value绑定数据，同时添加@on-change="funFrom.start_date=$event"

<FormItem label="操作时间">
  <DatePicker
    :value="funFrom.start_date"
    format="yyyy-MM-dd"
    type="datetime"
    placeholder="请选择日期"
    :options="options1"
    @on-change="funFrom.start_date=$event"></DatePicker>
  <DatePicker
    :value="funFrom.end_date"
    format="yyyy-MM-dd"
    type="date"
    placeholder="请选择日期"
    :options="options1"
    @on-change="funFrom.end_date=$event"></DatePicker>
</FormItem>
<div class="button">
  <Button v-if="buttonMap.search" icon="ios-search" type="primary" @click="search">查询</Button>
</div>

<h3>开始日期：{{ funFrom.start_date }}</h3>
<h3>结束日期：{{ funFrom.end_date }}</h3>

点击查询后，执行search函数，发现开始日期 晚过 结束日期，则将两个日期交换，出现图二的效果：

methods: {
  search(){
    if (this.funFrom.start_date && this.funFrom.end_date){
      if (new Date(this.funFrom.start_date) - new Date(this.funFrom.end_date) > 0){
        var temp = this.funFrom.start_date
        this.funFrom.start_date=this.funFrom.end_date
        this.funFrom.end_date=temp
      }
    }
   //然后发请求，此处省略
  }
}

一开始看了其他解决方法，用v-model绑定，执行回调后，数据又会变回原来的格式。这样不行。

演示一下

选择日期，数据格式还是我想要的：

点击查询，交换日期后，又变回奇奇怪怪的格式：

 

 此时的代码是用v-model绑定数据的：

<FormItem label="操作时间">
  <DatePicker
  v-model="funFrom.start_date"
  format="yyyy-MM-dd"
  type="datetime"
  placeholder="请选择日期"
  :options="options1"
  @on-change="funFrom.start_date=$event"></DatePicker>
  <DatePicker
  v-model="funFrom.end_date"
  format="yyyy-MM-dd"
  type="date"
  placeholder="请选择日期"
  :options="options1"
  @on-change="funFrom.end_date=$event"></DatePicker>
<\FormItem>