Element UI【组件拓展】el-datetime-picker-before 禁止选择未来时间的日期时间选择器（精确到时分秒）

<template>
    <div>
        <el-date-picker
                value-format="yyyy-MM-dd"
                @change="dateChange"
                :size="size"
                :picker-options="dateOptions"
                v-model="date"
                type="date"
                placeholder="选择日期">
        </el-date-picker>
        <el-time-picker
                v-if="showTimePicker"
                value-format="HH:mm:ss"
                @change="timeChange"
                :size="size"
                :picker-options="timeOptions"
                v-model="time"
                placeholder="选择时间">
        </el-time-picker>
    </div>
</template>
<script>
    export default {
        model: {
            prop: 'value',
            event: 'updateDateTime'
        },
        methods: {
            dateChange(newDate) {
                // 从其他日期切换到今天
                if ((newDate === new Date().format('yyyy-MM-dd')) && (this.time > new Date().format("hh:mm:ss"))) {
                    this.time = '00:00:00'
                }
                this.updateTimeOptions()
                this.$emit('updateDateTime', this.date + ' ' + this.time)
            },
            timeChange() {
                this.$emit('updateDateTime', this.date + ' ' + this.time)
            },
            updateTimeOptions() {
                if (this.date === new Date().format('yyyy-MM-dd')) {
                    this.$set(this.timeOptions, 'selectableRange', "00:00:00-" + new Date().format("hh:mm:ss"))
                } else {
                    this.$set(this.timeOptions, 'selectableRange', '')
                }
                this.reloadTimePicker()
            },
            reloadTimePicker() {
                this.showTimePicker = false
                this.$nextTick(
                    () => {
                        this.showTimePicker = true
                    }
                )
            },
        },
        props: {
            value: String,
            size: {
                type: String,
                default: 'mini'
            }
        },
        mounted() {
            let dateTime = this.value.split(' ')
            this.date = dateTime[0]
            this.time = dateTime[1]
            this.updateTimeOptions()
        },
        data() {
            return {
                showTimePicker: true,
                date: '',
                time: '',
                dateOptions: {
                    //禁止选择未来的日期，不包含今天。
                    disabledDate(time) {
                        return time.getTime() > Date.now()
                    }
                },
                timeOptions: {
                    //禁止选择未来的时间，不包含当前时刻。
                    selectableRange:
                        "00:00:00-" + new Date().format("hh:mm:ss")
                },
            }
        }
    }
    // 为Date原型添加格式化方法
    Date.prototype.format = function (fmt) {
        var o = {
            "M+": this.getMonth() + 1, //月份
            "d+": this.getDate(), //日
            "h+": this.getHours(), //小时
            "m+": this.getMinutes(), //分
            "s+": this.getSeconds(), //秒
            "q+": Math.floor((this.getMonth() + 3) / 3), //季度
            S: this.getMilliseconds() //毫秒
        };
        if (/(y+)/.test(fmt)) {
            fmt = fmt.replace(
                RegExp.$1,
                (this.getFullYear() + "").substr(4 - RegExp.$1.length)
            );
        }
        for (var k in o) {
            if (new RegExp("(" + k + ")").test(fmt)) {
                fmt = fmt.replace(
                    RegExp.$1,
                    RegExp.$1.length == 1
                        ? o[k]
                        : ("00" + o[k]).substr(("" + o[k]).length)
                );
            }
        }
        return fmt;
    };
</script>
<style scoped>
</style>

<template>
    <div style="padding: 20px">
        <el-datetime-picker-before v-model="pubTime" />
    </div>
</template>
<script>
    import elDatetimePickerBefore from './el-datetime-picker-before'
    export default {
        components:{elDatetimePickerBefore},
        data() {
            return {
                pubTime: "2021-05-24 02:50:44",
            }
        },
    }
</script>
<style scoped>
</style>