<template>
<div>
<div class="active-item">
<div class="active-title">
<span>*</span>
开始时间:
</div>
<div class="active-value">
</el-date-picker>
<el-date-picker
v-model="startTime"
type="datetime"
:picker-options="{
disabledDate: (time) => {
return dataTime.startTimeData(time)
},
selectableRange: this.startTimeRange,
}"
:default-time="defaultTime"
value-format="yyyy-MM-dd HH:mm:ss"
format="yyyy-MM-dd HH:mm:ss"
placeholder="开始时间"
></el-date-picker>
</div>
</div>
<div class="active-item">
<div class="active-title">
结束时间:
</div>
<div class="active-value">
<el-date-picker
v-model="endTime"
type="datetime"
:picker-options="{
disabledDate: (time) => {
return dataTime.endTimeData(time)
},
selectableRange: this.endTimeRange,
}"
:default-time="defaultTime"
value-format="yyyy-MM-dd HH:mm:ss"
format="yyyy-MM-dd HH:mm:ss"
placeholder="结束时间"
></el-date-picker>
</div>
</div>
</div>
</template>
data() {
return {
startTime: "",
endTime: "",
dataTime: {
startTimeData: (time) => {
if (this.endTime != "") {
return time.getTime() < Date.now()- 8.64e7 || time.getTime() < this.endTime;
} else {
return time.getTime() < Date.now() - 8.64e7;
}
},
endTimeData: (time) => {
return (
time.getTime() < this.startTime ||
time.getTime() < Date.now() - 8.64e7
);
},
},
};
},
watch: {
startTime: {
handler(newValue, oldValue) {
if (newValue) {
let nowDate = this.format(new Date(), "-")
let dt = nowDate.split(" ")
let st = ""
if (newValue.split(" ")[0] == dt[0]) {
// 是今天,选择 的时间开始为此刻的时分秒
st = dt[1]
} else {
// 明天及以后从0时开始
st = "00:00:00"
}
this.startTimeRange = st + " - 23:59:59"
//例如:如果今天此刻时间为10:41:40 则选择时间范围为: 10:41:40 - 23:59:59
//否则为:00:00:00- 23:59:59
}
},
},
endTime: {
handler(newValue, oldValue) {
if (newValue) {
let zt = this.startTime.split(" ")
let st = ""
//如果开始日期和结束日期都选择当天
if (newValue.split(" ")[0] == zt[0]) {
st = zt[1]
} else {
st = "00:00:00"
}
this.endTimeRange = st + " - 23:59:59"
}
},
},
},
supplement(nn) {
return (nn = nn < 10 ? "0" + nn : nn);
},
format(Date, str) {
var obj = {
Y: Date.getFullYear(),
M: Date.getMonth() + 1,
D: Date.getDate(),
H: Date.getHours(),
Mi: Date.getMinutes(),
S: Date.getSeconds(),
};
var time =
" " +
this.supplement(obj.H) +
":" +
this.supplement(obj.Mi) +
":" +
this.supplement(obj.S);
if (str.indexOf("-") > -1) {
return (
obj.Y +
"-" +
this.supplement(obj.M) +
"-" +
this.supplement(obj.D) +
time
);
}
if (str.indexOf("/") > -1) {
return (
obj.Y +
"/" +
this.supplement(obj.M) +
"/" +
this.supplement(obj.D) +
time
);
}
},
computed: {
defaultTime(){
let data = new Date()
let h = data.getHours()
let m = data.getMinutes()
let s = data.getSeconds()
return h + ":" + m + ":" + s
}
},