
<template>
<div>
<span>
<label>选择时间:</label>
<DatePicker
v-model="dateTimePicker[0]"
type="datetime"
@on-change="startTimeChange"
:options="startTimeOptions"
format="yyyy-MM-dd HH:mm:ss"
placeholder="请选择开始时间"></DatePicker>
~
<DatePicker
v-model="dateTimePicker[1]"
type="datetime"
@on-change="endTimeChange"
:options="endTimeOptions"
format="yyyy-MM-dd HH:mm:ss"
placeholder="请选择结束时间"></DatePicker>
</span>
</div>
</template>
<script>
export default {
methods: {
// 重置
reset() {
this.dateTimePicker = ['', ''];
this.startTimeOptions = {
disabledDate: date => {
return ''
}
}
this.endTimeOptions = {
disabledDate: date => {
return ''
}
}
},
startTimeChange: function(e) { //设置开始时间
/*
1.当结束时间为空或小于开始时间时,设置结束时间等于开始时间
2.根据开始时间设置结束时间的disabled日期
结束时间的不可选日期节点:
1) 开始时间为00:00:00时 => 开始时间的00:00:00 - 1,即前一天的23:59:59
2) 开始时间不等于00:00:00时 => 前一天?
*/
if(!e) return false
if(!this.dateTimePicker[1] || new Date(this.dateTimePicker[1]).valueOf() < new Date(e).valueOf()) {
this.dateTimePicker[1] = e;
}
// let startTime = e ? new Date(e).valueOf() - 1 * 24 * 60 * 60 * 1000 : '';
let endDisTime = 0; // 结束时间不可选时间节点
let fristMS = new Date(new Date(e).toLocaleDateString()).valueOf(); // 开始时间的 00:00:00的毫秒数
if(fristMS == new Date(e).valueOf()) { // 开始时间为00:00:00
endDisTime = new Date(new Date(e).toLocaleDateString()).valueOf() - 1;
} else {
endDisTime = e ? new Date(e).valueOf() - 1 * 24 * 60 * 60 * 1000 : '';
}
this.endTimeOptions = {
disabledDate: date => {
return date && (date.valueOf() < endDisTime);
}
}
},
endTimeChange: function(e) { //设置结束时间
let _this = this;
let flag = false;
// console.log(new Date(new Date(this.dateTimePicker[0]).toLocaleDateString()),new Date(new Date(e).toLocaleDateString()))
if(!e || !this.dateTimePicker[0]) return false
let endTime = new Date(e).valueOf();
let startTime = new Date(this.dateTimePicker[0]).valueOf();
if(startTime > endTime) {
this.dateTimePicker[1] = this.dateTimePicker[0]
flag = true
}
// let endTimepre = endTime + 1 * 24 * 60 * 60 * 1000;
let endTimepre = new Date(new Date(e).toLocaleDateString()).valueOf() + 1 * 24 * 60 * 60 * 1000 - 1;
this.startTimeOptions = {
disabledDate(date) {
return date && (flag ? '': date.valueOf() > endTimepre);
// return date.valueOf() < startTime;
}
}
},
}
}
</script>