实现的效果如下:
初始选择日期后,绑定的日期数据显示在日期选择器下方(即开始日期、结束日期):
点击查询后,发现开始日期 晚过 结束日期,自动交换日期,且日期格式不变:
代码:
注意使用 :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>