需要注意的是el-date-picker 的format格式跟dayjs的格式稍有不同;
- el的格式:yyyy-MM-dd HH:mm:ss;
- dayjs的格式: YYYY-MM-DD HH:mm:ss;
禁止选择当前时间之前的时间:
<el-date-picker
format="HH:mm"
size="small"
value-format="yyyy-MM-dd HH:mm:ss"
v-model="datetime"
type="datetime"
:picker-options="{
disabledDate(time) {
return time.getTime() < Date.now() - 8.64e7;
}, selectableRange: selectableRange }"
placeholder="选择日期时间">
</el-date-picker>
import dayjs from 'dayjs';
data() {
return {
datetime: '',
selectableRange: '',
}
}
watch: {
datetime: {
handler(newValue, oldValue) {
const time = dayjs().format('YYYY-MM-DD HH:mm:ss');
const dt = time.split(' ');
let minTime = '';
// 是今天,选择 的时间开始为此刻的时分秒
if (newValue.split(' ')[0] === dt[0]) {
minTime = dt[1];
if (!oldValue) {
this.datetime = time;
} else if (newValue.split(' ')[0] !== oldValue.split(' ')[0]) {
this.datetime = time;
}
} else {
minTime = '00:00:00';
}
this.selectableRange = `${minTime} - 23:59:59`;
},
},
},
禁止选择今天之后的时间:
<el-date-picker
:key="'date'"
v-model="faultTime"
style="width:100%"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="选择日期时间"
:picker-options="{
disabledDate(time) {
return time.getTime() > Date.now()
},
selectableRange: selectableRange
}" />
import dayjs from 'dayjs'
data() {
return {
faultTime: null,
selectableRange: "",
};
},
watch: {
faultTime: {
handler(newValue, oldValue) {
let dateTime = dayjs().format("YYYY-MM-DD HH:mm:ss"); //当前时间
const dt = dateTime.split(' ')
let maxTime = ''
// 是今天,选择 的时间开始为此刻的时分秒
if (newValue.split(' ')[0] === dt[0]) {
maxTime = dt[1]
if (!oldValue) {
this.faultTime = dateTime
} else if (newValue.split(' ')[0] != oldValue.split(' ')[0]) {
this.faultTime = dateTime
}
} else {
maxTime = '23:59:59'
}
this.selectableRange = '00:00:00 - ' + maxTime
}
}
},