<!--开始日期-->
<el-form-item label="开始日期" prop="startDateStr">
<el-date-picker
v-model="startDateStr"
:picker-options="pickerStartDate"
type="date"
format="yyyy-MM-dd"
range-separator="-"
value-format="yyyy-MM-dd"
placeholder="开始日期">
</el-date-picker>
</el-form-item>
<!--结束日期-->
<el-form-item label="结束日期" prop="endDateStr">
<el-date-picker
:picker-options="pickerEndDate"
v-model="endDateStr"
type="date"
format="yyyy-MM-dd"
range-separator="-"
value-format="yyyy-MM-dd"
placeholder="结束日期">
</el-date-picker>
</el-form-item>
<!--开始时间-->
<el-form-item label="开始时间" prop="startTime">
<el-time-picker
v-model="startTime"
selectableRange:`00:00:00 - ${endTime ? endTime+':00' : '23:59:00'}`
}"
format="HH:mm"
value-format="HH:mm"
placeholder="开始时间">
</el-time-picker>
</el-form-item>
<!--结束时间-->
<el-form-item label="结束时间" prop="endTime">
<el-time-picker
format="HH:mm"
value-format="HH:mm"
v-model="endTime"
placeholder="结束时间"
:picker-options="{
selectableRange:`${startTime ? startTime+':00' : '00:00:00'} - 23:59:00`
}"
>
</el-time-picker>
</el-form-item>
data() {
return {
oneDayMsec: 1 * 24 * 3600 * 1000, //一天的毫秒数
pickerStartDate: this.pickerStartDate(),
pickerEndDate: this.pickerEndDate(),
}
},
methods: {
/**开始日期可选 当天之后(包含当天)且不可大于结束日期 **/
pickerStartDate() {
var _this = this;
return {
disabledDate(time) {
var time1 = new Date(_this.endDateStr).getTime();// 开始日期时间戳
let a = time.getTime() <= Date.now() - 8.64e7;
return time1 ? (a || time.getTime() > time1) : a;
}
}
},
/**结束日期必须大于等于开始日期 且限制从当天之后(包含当天)可选**/
pickerEndDate() {
var _this = this;
return {
disabledDate(time) {
var time1 = new Date(_this.startDateStr).getTime();// 开始日期时间戳
let a = time.getTime() <= Date.now() - 8.64e7;
return time1 ? (a || time.getTime() <= time1 - _this.oneDayMsec) : a;
}
}
},
}
/**
pickerOptions1: {
disabledDate(time) {
return time.getTime() < Date.now() - 8.64e7;//当天之后的时间可选
return time.getTime() > Date.now() - 8.64e7;//当天之前的时间可选
return time.getTime() > Date.now() ;//当天之前的时间可选---不包括当天
},
}
**/