基于elementUI的el-date-picker实现只能选择当前时间点之后的时间

在工作中实现一个需求的时候，相信平时小伙伴在工作中会经常遇到这类型需求，所以记录一下，希望对有需要的小伙伴有用处

大概描述一下需求：时间选择的需求，只能选择当前时间点之后的时间

背景：技术栈为vue，element-ui

<template>

    <div>

        <el-date-picker

        popper-class="now-data-picker"

        v-model="myTime"

        :picker-options="{

            disabledDate(time) {

                return time.getTime() < Date.now() - 1 * 24 * 3600 * 1000;

            },

            selectableRange: startTimeRange

        }"

        :editable="false"

        type="datetime"

        placeholder="请选择时间"

        format="yyyy-MM-dd HH:mm:ss"

        value-format="yyyy-MM-dd HH:mm:ss"

        ></el-date-picker>

    </div>

</template>

<script>

import moment from 'moment'

export default {

    name: "DateComponent",

    data() {

        return {

            // 时间

            myTime: '',

            // 可选的时间范围

            startTimeRange: ''

        }

    },

    watch: {

        myTime:{

            handler(newValue, oldValue) {

                if(newValue){

                    let nowDate = moment().format('YYYY-MM-DD HH:mm:ss');

                    let dt = nowDate.split(" ");

                    let st = '';

                    if(newValue.split(" ")[0] == dt[0]){

                        // 如果是当天,选择的时间开始为此刻的时分秒

                        st = dt[1];

                        // 如果是当天（只有当日期改变时）,默认选中时间为当前时间

                        if (newValue.split(" ")[0] != oldValue.split(" ")[0]) {

                            this.myTime = nowDate;

                        }

                    }else{

                        // 明天以及后面的时间从0时开始

                        st = '00:00:00';

                    }



                    this.startTimeRange =  st + ' - 23:59:59';

                    //例如：如果今天此刻时间为15:27:00 则选择时间范围为： 15:27:00 - 23:59:59 

                    //否则为：00:00:00 - 23:59:59

                }

            }

        }

    },

};

</script>

以上是我对该需求的实现，由于目前还是一个小白，写文章更多是为了自己的知识的一个总结，其中可能会出现错误或者还有其他更好的方案实现，欢迎指出