1、版本
"date-fns": "^2.29.3",
"element-ui": "^2.15.13",
2、可使用date-fns處理時(shí)間
import { format, isToday } from 'date-fns';
// 時(shí)間格式化為：yyyy-MM-dd HH:mm:ss
export function dateTimeFormat(time) {
return format(time, 'yyyy-MM-dd HH:mm:ss');
}
// 時(shí)間格式化為：yyyy-MM-dd
export function dateFormat(time) {
return format(time, 'yyyy-MM-dd');
}
// 時(shí)間格式化為：HH:mm:ss
export function timeFormat(time) {
return format(time, 'HH:mm:ss');
}
// 判斷日期是不是今天
export function dateIsToday(time) {
return isToday(time);
}
3、日期時(shí)間選擇器，禁用當(dāng)前時(shí)刻之前的日期時(shí)間選擇
// 日期時(shí)間選擇器，禁用當(dāng)前時(shí)刻之前的日期時(shí)間選擇
<template>
<div>
<el-date-picker
v-model="dateTimeValue"
type="datetime"
placeholder="選擇日期時(shí)間"
:picker-options="pickerOptions"
:default-time="defaultTime"
@change="dateChange">
</el-date-picker>
</div>
</template>
<script>
import { dateTimeFormat, dateFormat, timeFormat, dateIsToday } from 'utils/dateUtil.js';
export default {
name: 'date-picker',
data() {
return {
dateTimeValue: '',
pickerOptions: {
disabledDate: (time) => {
if (dateIsToday(time)) {
return false;
} else {
return time.getTime() < new Date().getTime();
}
},
selectableRange: '00:00:00 - 23:59:59',
},
};
},
watch: {
dateTimeValue(newVal, oldVal) {
// 選擇的日期變化，重新計(jì)算一下可選時(shí)間點(diǎn)范圍
if (!(newVal && oldVal && dateFormat(newVal) === dateFormat(oldVal))) {
this.pickerOptions.selectableRange = this.getSelectableRange(newVal);
}
},
},
computed: {
defaultTime() {
return timeFormat(new Date());
}
},
methods: {
getSelectableRange(time) {
// 選擇日期若是今天，可選時(shí)間范圍限制當(dāng)前時(shí)刻至23:59:59
if (time && dateIsToday(time)) {
// 若從別的日期切換到今天，選擇時(shí)間點(diǎn)不在可選范圍內(nèi)，就修改為此刻
if (time.getTime() < new Date().getTime()) {
this.dateTimeValue = new Date().getTime();
}
return `${timeFormat(new Date())} - 23:59:59`;
} else {
return '00:00:00 - 23:59:59';
}
},
dateChange(val) {
if (val) {
// 也可以在此處再校驗(yàn)一下選擇的日期時(shí)間是否在范圍內(nèi)
console.log(dateTimeFormat(val));
}
},
},
}
</script>
<style scoped>
</style>效果：
??
4、日期時(shí)間選擇器，禁用當(dāng)前時(shí)刻之后的日期時(shí)間選擇
// 日期時(shí)間選擇器，禁用當(dāng)前時(shí)刻之后的日期時(shí)間選擇
<template>
<div>
<el-date-picker
popper-class="date-time"
v-model="dateTimeValue"
type="datetime"
placeholder="選擇日期時(shí)間"
:picker-options="pickerOptions"
default-time="00:00:00"
@change="dateChange">
</el-date-picker>
</div>
</template>
<script>
import { dateTimeFormat, dateFormat, timeFormat, dateIsToday } from 'utils/dateUtil.js';
export default {
name: 'date-picker',
data() {
return {
dateTimeValue: '',
pickerOptions: {
disabledDate: (time) => {
return time.getTime() > new Date().getTime();
},
selectableRange: '00:00:00 - 23:59:59',
},
};
},
watch: {
dateTimeValue(newVal, oldVal) {
// 選擇的日期變化，重新計(jì)算一下可選時(shí)間點(diǎn)范圍
if (!(newVal && oldVal && dateFormat(newVal) === dateFormat(oldVal))) {
this.pickerOptions.selectableRange = this.getSelectableRange(newVal);
}
},
},
methods: {
getSelectableRange(time) {
// 選擇日期若是今天，可選時(shí)間范圍限制00:00:00至當(dāng)前時(shí)刻
if (time && dateIsToday(time)) {
// 若從別的日期切換到今天，選擇時(shí)間點(diǎn)不在可選范圍內(nèi)，就修改為此刻
if (time.getTime() > new Date().getTime()) {
this.dateTimeValue = new Date().getTime();
}
return `00:00:00 - ${timeFormat(new Date())}`;
} else {
return '00:00:00 - 23:59:59';
}
},
dateChange(val) {
if (val) {
// 也可以在此處再校驗(yàn)一下選擇的日期時(shí)間是否在可選時(shí)間范圍內(nèi)
console.log(dateTimeFormat(val));
}
},
},
}
</script>
<style>
/* 點(diǎn)擊此刻有個(gè)問題：當(dāng)現(xiàn)在選中的日期是今天，再點(diǎn)擊選擇此刻沒反應(yīng)，由于點(diǎn)擊選擇此刻是時(shí)間點(diǎn)直接有的，但此刻的時(shí)間點(diǎn)不在上次計(jì)算的可選范圍內(nèi)，就導(dǎo)致點(diǎn)擊沒反應(yīng)。 */
/* 因此，隱藏此刻按鈕：設(shè)置popper-class="date-time"，popper-class是DateTimePicker 下拉框的類名 */
.date-time .el-picker-panel__footer .el-button--text.el-picker-panel__link-btn {
display: none;
}
</style>效果：文章來源：http://www.zghlxwxcb.cn/news/detail-517421.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-517421.html
到了這里，關(guān)于Element-UI的DateTimePicker禁用日期時(shí)間選擇(type=datetime)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
