实现如下图效果（可选时间：此刻+5min）：
<el-date-picker
v-model="elForm.upload_ts"
type="datetime"
placeholder="请选择时刻"
clearable
value-format="yyyy-MM-dd HH:mm"
format="yyyy-MM-dd HH:mm"
:picker-options="pickerOptions"
:popper-class="'currentDatePickerClass'">
</el-date-picker>
</el-date-picker>
.currentDatePickerClass > .el-picker-panel__footer > .el-button--text:first-child{
display: none;
}
parseTime (time, cFormat) {
if (arguments.length === 0) {
return null;
}
const format = cFormat || "{y}-{m}-{d} {h}:{i}:{s}";
let date;
if (typeof time === "object") {
date = time;
} else {
if (typeof time === "string" && /^[0-9]+$/.test(time)) {
time = parseInt(time);
}
if (typeof time === "number" && time.toString().length === 10) {
time = time * 1000;
}
date = new Date(time);
}
const formatObj = {
y: date.getFullYear(),
m: date.getMonth() + 1,
d: date.getDate(),
h: date.getHours(),
i: date.getMinutes(),
s: date.getSeconds(),
a: date.getDay()
};
const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
let value = formatObj[key];
// Note: getDay() returns 0 on Sunday
if (key === "a") {
return ["日", "一", "二", "三", "四", "五", "六"][value];
}
if (result.length > 0 && value < 10) {
value = "0" + value;
}
return value || 0;
});
return time_str;
}
pickerOptions: {
// 当天可选 5*60*1000是当前时间+5min可选
disabledDate(time) {
return time.getTime() < Date.now() - 8.64e7 + 5 * 60 * 1000;
},
// 时间限制
selectableRange: '00:00:00 - 23:59:59',
},
computed: {
upload_ts() {
return this.elForm.upload_ts || "";
}
},
watch: {
upload_ts: function(newVal, oldVal) {
// 清空时间的时候不处理
if (!newVal) {
return;
}
let date = new Date(Date.now() + 5 * 60 * 1000);
// 获取5min后时间的小时和分钟
let minutes = date.getMinutes();
let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
let m = (minutes < 10 ? '0' + minutes : minutes);
// 所选时间转换为日期
let selectDate = parseTime(newVal, "{y}-{m}-{d}");
// 上次所选时间转换为日期
let oldDate = parseTime(oldVal, "{y}-{m}-{d}");
// 5min后时间转换为日期
let nowDate = parseTime(new Date(Date.now() + 5 * 60 * 1000), "{y}-{m}-{d}");
// 上次所选时间的小时和分钟
let hourMin = oldVal ? parseTime(oldVal, "{h}:{i}") : "00:00";
if (selectDate < nowDate) {
selectDate = nowDate;
}
// 如果两次选择的时间不相等
if (oldDate !== selectDate) {
// 如果这次选择的时间等于今天的时间就不让选当前小时之前，否则就可以选全部时间段
if (selectDate === nowDate) {
this.pickerOptions0.selectableRange = h + m + ':00 - 23:59:59';
let str = h + m >= hourMin ? (h + m) : hourMin;
this.elForm.upload_ts = parseTime(selectDate + " " + str, "{y}-{m}-{d} {h}:{i}");
} else if (oldDate !== selectDate && selectDate === nowDate) {
this.pickerOptions0.selectableRange = '00:00:00 - 23:59:59';
let str = h + m >= hourMin ? (h + m) : hourMin;
this.elForm.upload_ts = parseTime(selectDate + " " + str, "{y}-{m}-{d} {h}:{i}");
} else if (oldDate !== selectDate && selectDate !== nowDate) {
this.pickerOptions0.selectableRange = '00:00:00 - 23:59:59';
this.elForm.upload_ts = parseTime(selectDate + " " + hourMin, "{y}-{m}-{d} {h}:{i}");
}
}
}
},
