element日期选择项(el-date-picker)设置选择限制

element-plus

element-plus的el-date-picker移除了picker-options取而代之的是disabled-date

使用:

<el-date-picker
    v-model="filters.startTime"
    type="datetime"
    placeholder="请选择开始时间"
    :disabled-date="pickerStartOptions"
    :disabled-hours="disabledStartHours"
    :disabled-minutes="disabledStartMinutes"
    :disabled-seconds="disabledStartSeconds"
/>

const pickerEndOptions = (time) => {
	if (!filters.startTime) return false;
	return time.getTime() < new Date(filters.startTime).getTime();
};
const disabledEndHours = () => {
	if (
		dayjs(new Date(filters.startTime)).format("YYYY-MM-DD") ===
		dayjs(new Date(filters.endTime)).format("YYYY-MM-DD")
	) {
		const h = dayjs(new Date(filters.startTime)).hour();
		const tempArr = [];
		for (let i = 0; i < h; i++) {
			tempArr.push(i);
		}
		return tempArr;
	}
	return [];
};
...

element-ui

<el-date-picker
    v-model="startTime"
    type="datetime"
    placeholder="请选择开始时间"
    :picker-options="pickerStartOptions()"
/>

methods: {
    pickerStartOptions() {
        return {
            // 日期限制
            disabledDate: (time) => {
                    if (!this.endTime) return false;
                    return time.getTime() > new Date(this.endTime).getTime();
            },
            // 时间段限制
            selectableRange:  "00:00:00 - 3:39:00", // 这里加判断就行了
        };
    },
}