I use vue3 and "element-plus": "^2.2.16",
My current project requires time input(I use el-date-picker), and the time cannot exceed the current
I have checked the documentation of element plus , and i found this disabled-date (data: Date) => boolean
It seems that this can be used to limit the date to not exceed the current time, but it is not enough, I also need to limit the hours and minutes
I found an article about that
The article roughly means that in element plus, the component for selecting time in el-date-picker comes from el-time-picker
So the time limit method in el-time-picker should also be available in el-date-picker
disabled-hours Function (role: string, comparingDate?: Dayjs) => number[]
disabled-seconds Function (hour: number, minute: number, role: string, comparingDate?: Dayjs) => number[]
disabled-seconds Function (hour: number, minute: number, role: string, comparingDate?: Dayjs) => number[]
After experimenting, it is feasible and it seems that the problem has been solved, but it is just the beginning.
Regarding hours and minutes, I can't simply limit it. What I want to do is limit all the hours before this day and all the minutes before this hour.
It seems that the parameter comparingDate
in disabled-hours is born for this purpose
But this is the problem. There is no example about this in the official documentation. I don’t even know what the data format of Dayjs is.
I believe this is not some kind of generalization, because the disabled-date
method clearly states that data
is in Data
format.
I guess comparingDate
should be the date obtained from `el-date-picker, but it is only a guess and I don't know how to use it
So, I came to seek help
I did it like this
<div>
<el-date-picker style="width: 100%;" v-model="strategyConfig.expiration" type="datetime"
:disabled-date="disablePastDates"
:disabled-hours="disablePastHours"
placeholder="请选择失效时间" />
</div>
const disablePastDates = (time: Date) => Date.now() - 24 * 60 * 60 * 1000 > time.getTime();
const disablePastHours = (comparingDate: Date) => {
const currentHour = comparingDate.getHours();
return Array.from({ length: 24 }, (_, i) => i + 1).filter(hour => hour <= currentHour);
};
disablePastDates works fine But disablePastHours does not work, but reports an error. The error message is as follows
Uncaught (in promise) TypeError: comparingDate.getHours is not a function at disablePastHours (WhiteProject.vue:73:39)
Like this, I don't know what to do