When using the elementUIDateTimePicker date time picker component, you want to display the current time and disable the date before the current time

When using the elementUIDateTimePicker date time picker component, you want to display the current time and disable the date before the current time

show current time
The specific time used when selecting the start and end dates can be controlled by the option default-time. default-time accepts an array, and each item of the array is a string, such as 12:00:00, where the first item controls the specific time of the start date, and the second item controls the specific time of the end date.

Use the moment plugin

Set the start time and end time to be displayed

//前提需要下载moment插件 npm i moment 
//引入import moment from 'moment'
data(){
    retuen:{
        defaultTime: [moment().format('HH:mm:ss'), '00:00:00'],
    }
}
    
    
    //然后在el-date-picker组件中添加 :default-time="defaultTime" 即可

Disable dates before the current time

Refer to the official documentation of element ui to use the picker-options attribute and disabledDate (set the disabled state, the parameter is the current date, and return Boolean)

JavaScript getTime() method

返回距 1970 年 1 月 1 日之间的毫秒数：
var d = new Date();
var n = d.getTime();
// 输出结果:1661489029980

use:

<el-date-picker type="datetime" 
:picker-options="forbiddenTime" 
value-format="yyyy-MM-dd HH:mm:ss" 
v-model.trim="data.time" 
style="width: 100%;"/>


data() {
    return {
        forbiddenTime:{                    //禁用当前日期之前的日期
            disabledDate(time) {
            //Date.now()是javascript中的内置函数，它返回自1970年1月1日00:00:00 UTC以来经过的毫秒数。
                return time.getTime() < Date.now() - 8.64e7;
            },
        },
     }
}