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();
}
}