<FormItem label="">
<Row>
<Col span="11">
<DatePicker type="date" :options="startTimeOptions" @on-change="startTimeChange" placeholder="開始時間"
v-model="starttime"></DatePicker>
</Col>
<Col span="2" style="text-align: center">-</Col>
<Col span="11">
<DatePicker type="date" :options="endTimeOptions" @on-change="endTimeChange" placeholder="結束時間"
v-model="endtime"></DatePicker>
</Col>
</Row>
</FormItem>
export default {
data() {
return {
startTimeOptions: {}, //開始日期設置
endTimeOptions: {}, //結束日期設置
starttime: '', //開始日期model
endtime: '',//結束日期model
}
},
methods: {
startTimeChange: function(e) { //設置開始時間
this.starttime = e;
this.endTimeOptions = {
disabledDate: date => {
let startTime = this.starttime ? new Date(this.starttime).valueOf() : '';
return date && (date.valueOf() < startTime);
}
}
},
endTimeChange: function(e) { //設置結束時間
this.endtime = e;
let endTime = this.endtime ? new Date(this.endtime).valueOf() - 1 * 24 * 60 * 60 * 1000 : '';
this.startTimeOptions = {
disabledDate(date) {
return date && date.valueOf() > endTime;
}
}
},
}
}
轉載:https://blog.csdn.net/qq_29483485/article/details/80968009