Element-UI的DateTimePicker禁用日期时间选择(type=datetime)-Toy模板网

这篇具有很好参考价值的文章主要介绍了Element-UI的DateTimePicker禁用日期时间选择(type=datetime)。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1、版本

"date-fns": "^2.29.3",

"element-ui": "^2.15.13",

2、可使用date-fns处理时间

import { format, isToday } from 'date-fns';

// 时间格式化为：yyyy-MM-dd HH:mm:ss
export function dateTimeFormat(time) {
    return format(time, 'yyyy-MM-dd HH:mm:ss');
}
// 时间格式化为：yyyy-MM-dd
export function dateFormat(time) {
    return format(time, 'yyyy-MM-dd');
}
// 时间格式化为：HH:mm:ss
export function timeFormat(time) {
    return format(time, 'HH:mm:ss');
}

// 判断日期是不是今天
export function dateIsToday(time) {
    return isToday(time);
}

3、日期时间选择器，禁用当前时刻之前的日期时间选择

// 日期时间选择器，禁用当前时刻之前的日期时间选择
<template>
  <div>
    <el-date-picker
        v-model="dateTimeValue"
        type="datetime"
        placeholder="选择日期时间"
        :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) {
            // 选择的日期变化，重新计算一下可选时间点范围
            if (!(newVal && oldVal && dateFormat(newVal) === dateFormat(oldVal))) {
                this.pickerOptions.selectableRange = this.getSelectableRange(newVal);
            }
        },
    },
    computed: {
        defaultTime() {
            return timeFormat(new Date());
        }
    },
    methods: {
        getSelectableRange(time) {
            // 选择日期若是今天，可选时间范围限制当前时刻至23:59:59
            if (time && dateIsToday(time)) {
                // 若从别的日期切换到今天，选择时间点不在可选范围内，就修改为此刻
                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) {
                // 也可以在此处再校验一下选择的日期时间是否在范围内
                console.log(dateTimeFormat(val));
            }
        },
    },
}
</script>
<style scoped>
</style>

效果：

datetimepicker禁用时间,Element-UI,vue.js,elementui,el-date-picker

4、日期时间选择器，禁用当前时刻之后的日期时间选择

// 日期时间选择器，禁用当前时刻之后的日期时间选择
<template>
  <div>
    <el-date-picker
        popper-class="date-time"
        v-model="dateTimeValue"
        type="datetime"
        placeholder="选择日期时间"
        :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) {
            // 选择的日期变化，重新计算一下可选时间点范围
            if (!(newVal && oldVal && dateFormat(newVal) === dateFormat(oldVal))) {
                this.pickerOptions.selectableRange = this.getSelectableRange(newVal);
            }
        },
    },
    methods: {
        getSelectableRange(time) {
            // 选择日期若是今天，可选时间范围限制00:00:00至当前时刻
            if (time && dateIsToday(time)) {
                // 若从别的日期切换到今天，选择时间点不在可选范围内，就修改为此刻
                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) {
                // 也可以在此处再校验一下选择的日期时间是否在可选时间范围内
                console.log(dateTimeFormat(val));
            }
        },
    },
}
</script>
<style>
/* 点击此刻有个问题：当现在选中的日期是今天，再点击选择此刻没反应，由于点击选择此刻是时间点直接有的，但此刻的时间点不在上次计算的可选范围内，就导致点击没反应。 */
/* 因此，隐藏此刻按钮：设置popper-class="date-time"，popper-class是DateTimePicker 下拉框的类名 */
.date-time .el-picker-panel__footer .el-button--text.el-picker-panel__link-btn {
    display: none;
}
</style>

效果：

datetimepicker禁用时间,Element-UI,vue.js,elementui,el-date-picker 文章来源地址https://www.toymoban.com/news/detail-517421.html