The implementation of element's el-date-picker component can only select the time after the current time, including time division

In the project, I encountered the el-date-picker component that needs to use element. The requirement is to only display the hour and minute without disappearing the second, and only the time after this moment can be selected. The disablement of el-date-picker is only for the date. Here are some things for the hour and minute deal with.

Effect:

 

Solution:

 <el-date-picker
   style="width: 220px"
   v-model="info.beginTime"
   type="datetime"
   placeholder="开始时间"
   format="yyyy-MM-dd HH:mm"
   :picker-options="pickerOption"
   @change="beginDateChange"
   >
</el-date-picker>

 1. format="yyyy-MM-dd HH:mm" is to set to display only the year, month, day, hour, minute and not the second

2. Restricted dates are only available today and after today

  pickerOption: {
        disabledDate: (time) => {
          return Date.now() - 3600 * 1000 * 24 > time.getTime();
        },
      },

3. There is no forbidden selection of time and minutes here. It is processed to judge whether the currently selected time is less than the current time. If it is less than the current time, it will be automatically replaced with the current time

  beginDateChange(date) {
      if (!date) return;
       var startAt = new Date(date).getTime();
      if (startAt < Date.now()) {
        this.info.beginTime = new Date();
      }
}