element-plus的el-date-picker组件,实现开始时间跟结束时间的双约束

173 阅读9分钟

废话不多数说直接上代码

开始时间小于结束时间并且结束时间大于开始时间,包含时分秒

....
<el-form :model="filters">
    <el-form-item label="开始时间">
        <el-date-picker
            v-model="filters.startTime"
            type="datetime"
            placeholder="请选择开始时间"
            :disabled-date="pickerStartOptions"
            :disabled-hours="disabledStartHours"
            :disabled-minutes="disabledStartMinutes"
            :disabled-seconds="disabledStartSeconds"
        />
    </el-form-item>
    <el-form-item label="结束时间">
        <el-date-picker
            v-model="filters.endTime"
            type="datetime"
            placeholder="请选择结束时间"
            :disabled-date="pickerEndOptions"
            :disabled-hours="disabledEndHours"
            :disabled-minutes="disabledEndMinutes"
            :disabled-seconds="disabledEndSeconds"
        />
    </el-form-item>
</el-form>
...
<script setup>
import dayjs from "dayjs";
const filters = reactive({
    startTime: "",
    endTime: "",
});
// 新增 pickerStartOptions 用于限制结束时间
const pickerStartOptions = (time) => {
	if (!filters.endTime) return false;
	return time.getTime() > new Date(filters.endTime).getTime();
};
const disabledStartHours = () => {
	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.endTime)).hour();
		const tempArr = [];
		for (let i = 24; i > h; i--) {
			tempArr.push(i);
		}
		return tempArr;
	}
	return [];
};
const disabledStartMinutes = () => {
	if (
		dayjs(new Date(filters.startTime)).format("YYYY-MM-DD HH") ===
		dayjs(new Date(filters.endTime)).format("YYYY-MM-DD HH")
	) {
		const m = dayjs(new Date(filters.endTime)).minute();
		const tempArr = [];
		for (let i = 60; i > m; i--) {
			tempArr.push(i);
		}
		return tempArr;
	}
	return [];
};
const disabledStartSeconds = () => {
	if (
		dayjs(new Date(filters.startTime)).format("YYYY-MM-DD HH:mm") ===
		dayjs(new Date(filters.endTime)).format("YYYY-MM-DD HH:mm")
	) {
		const s = dayjs(new Date(filters.endTime)).second();
		const tempArr = [];
		for (let i = 60; i >= s; i--) {
			tempArr.push(i);
		}
		return tempArr;
	}
	return [];
};

// 新增 pickerEndOptions 用于限制结束时间
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 [];
};
const disabledEndMinutes = () => {
	if (
		dayjs(new Date(filters.startTime)).format("YYYY-MM-DD HH") ===
		dayjs(new Date(filters.endTime)).format("YYYY-MM-DD HH")
	) {
		const m = dayjs(new Date(filters.startTime)).minute();
		const tempArr = [];
		for (let i = 0; i < m; i++) {
			tempArr.push(i);
		}
		return tempArr;
	}
	return [];
};
const disabledEndSeconds = () => {
	if (
		dayjs(new Date(filters.startTime)).format("YYYY-MM-DD HH:mm") ===
		dayjs(new Date(filters.endTime)).format("YYYY-MM-DD HH:mm")
	) {
		const s = dayjs(new Date(filters.startTime)).second();
		const tempArr = [];
		for (let i = 0; i <= s; i++) {
			tempArr.push(i);
		}
		return tempArr;
	}
	return [];
};
    
</script>

加上当前日期时间的判断,不能晚于当前的日期

<script setup>
// 新增 pickerStartOptions 用于限制结束时间
const pickerStartOptions = (time) => {
    const now = new Date();
    if (!filters.endTime) return time.getTime() > Date.now(); // 禁用今天之前的日期
    return time.getTime() > new Date(filters.endTime).getTime() || time.getTime() > now;
};

const disabledStartHours = () => {
    if (
        dayjs(new Date(filters.startTime)).format("YYYY-MM-DD") ===
        dayjs(new Date(filters.endTime)).format("YYYY-MM-DD")
    ) {
        const now = new Date();
        let h = dayjs(new Date(filters.endTime)).hour();
        if(dayjs(new Date(filters.startTime)).format("YYYY-MM-DD") === dayjs(now).format("YYYY-MM-DD")){
            h = h > now.getHours() ? now.getHours(): h;
        }
		const tempArr = [];
		for (let i = 24; i > h; i--) {
			tempArr.push(i);
		}
		return tempArr;
    }
    // 如果当前日期为当前日期,禁用当前时间之前的小时
    if(dayjs(new Date(filters.startTime)).format("YYYY-MM-DD") === dayjs(now).format("YYYY-MM-DD")){
        const h = now.getHours();
        const tempArr = [];
        for (let i = 24; i > h; i--) {
            tempArr.push(i);
        }
        return tempArr;
    }
    return [];
};

const disabledStartMinutes = () => {
	if (
		dayjs(new Date(filters.startTime)).format("YYYY-MM-DD HH") ===
		dayjs(new Date(filters.endTime)).format("YYYY-MM-DD HH")
	) {
        const now = new Date();
        let m = dayjs(new Date(filters.endTime)).minute();
        if(dayjs(new Date(filters.startTime)).format("YYYY-MM-DD") === dayjs(now).format("YYYY-MM-DD")){
            m = m > now.getMinutes() ? now.getMinutes(): m;
        }
		const tempArr = [];
		for (let i = 60; i > m; i--) {
			tempArr.push(i);
		}
		return tempArr;
	}
    // 如果当前日期为当前日期并且是当前小时,禁用当前时间之前的分钟
    if(dayjs(new Date(filters.startTime)).format("YYYY-MM-DD") === dayjs(now).format("YYYY-MM-DD")
        && dayjs(new Date(filters.startTime)).format("HH") === dayjs(now).format("HH")){
        const m = now.getMinutes();
        const tempArr = [];
        for (let i = 60; i > m; i--) {
			tempArr.push(i);
		}
        return tempArr;
    }
    return [];
};

const disabledStartSeconds = () => {
	if (
		dayjs(new Date(filters.startTime)).format("YYYY-MM-DD HH:mm") ===
		dayjs(new Date(filters.endTime)).format("YYYY-MM-DD HH:mm")
	) {
        const now = new Date();
        let s = dayjs(new Date(filters.endTime)).second();
        if(dayjs(new Date(filters.startTime)).format("YYYY-MM-DD") === dayjs(now).format("YYYY-MM-DD")){
            s = s > now.getSeconds() ? now.getSeconds(): s;
        }
		const tempArr = [];
		for (let i = 60; i >= s; i--) {
			tempArr.push(i);
		}
		return tempArr;
    }
    // 如果当前日期为当前日期并且是当前小时当前分钟,禁用当前时间之前的秒
    if(dayjs(new Date(filters.startTime)).format("YYYY-MM-DD") === dayjs(now).format("YYYY-MM-DD")
        && dayjs(new Date(filters.startTime)).format("HH:mm") === dayjs(now).format("HH:mm")){
        const s = now.getSeconds();
        const tempArr = [];
        for (let i = 60; i > s; i--) {
			tempArr.push(i);
		}
        return tempArr;
    }
    return [];
};

// 新增 pickerEndOptions 用于限制结束时间
const pickerEndOptions = (time) => {
    const now = new Date();
	if (!filters.startTime) return time.getTime() > Date.now();
    return(dayjs(new Date(time.getTime())).format("YYYY-MM-DD") < dayjs(filters.startTime).format("YYYY-MM-DD"))
    || time.getTime() > now;
};

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);
		}
        const now = new Date();
        if(dayjs(new Date(filters.endTime)).format("YYYY-MM-DD") === dayjs(now).format("YYYY-MM-DD")){
            for (let i = 24; i > now.getHours(); i--) {
                tempArr.push(i);
            }
        }
		return tempArr;
    }
    if(dayjs(new Date(filters.endTime)).format("YYYY-MM-DD") === dayjs(now).format("YYYY-MM-DD")){
        const h = now.getHours();
        const tempArr = [];
        for (let i = 24; i > h; i--) {
            tempArr.push(i);
        }
        return tempArr;
    }
    return [];
};

const disabledEndMinutes = () => {
	if (
		dayjs(new Date(filters.startTime)).format("YYYY-MM-DD HH") ===
		dayjs(new Date(filters.endTime)).format("YYYY-MM-DD HH")
	) {
		const m = dayjs(new Date(filters.startTime)).minute();
		const tempArr = [];
		for (let i = 0; i < m; i++) {
			tempArr.push(i);
		}
        const now = new Date();
        if(dayjs(new Date(filters.endTime)).format("YYYY-MM-DD") === dayjs(now).format("YYYY-MM-DD")){
            for (let i = 60; i > now.getMinutes(); i--) {
                tempArr.push(i);
            }
        }
		return tempArr;
    }
    // 如果当前日期为当前日期并且是当前小时,禁用当前时间之前的分钟
    if(dayjs(new Date(filters.endTime)).format("YYYY-MM-DD") === dayjs(now).format("YYYY-MM-DD")
        && dayjs(new Date(filters.endTime)).format("HH") === dayjs(now).format("HH")){
        const m = now.getMinutes();
        const tempArr = [];
        for (let i = 60; i > m; i--) {
			tempArr.push(i);
		}
        return tempArr;
    }
    return [];
};

const disabledEndSeconds = () => {
	if (
		dayjs(new Date(filters.startTime)).format("YYYY-MM-DD HH:mm") ===
		dayjs(new Date(filters.endTime)).format("YYYY-MM-DD HH:mm")
	) {
		const s = dayjs(new Date(filters.startTime)).second();
		const tempArr = [];
		for (let i = 0; i <= s; i++) {
			tempArr.push(i);
		}
        const now = new Date();
        if(dayjs(new Date(filters.endTime)).format("YYYY-MM-DD") === dayjs(now).format("YYYY-MM-DD")){
            for (let i = 60; i > now.getSeconds(); i--) {
                tempArr.push(i);
            }
        }
		return tempArr;
    }
    // 如果当前日期为当前日期并且是当前小时当前分钟,禁用当前时间之前的秒
    if(dayjs(new Date(filters.endTime)).format("YYYY-MM-DD") === dayjs(now).format("YYYY-MM-DD")
        && dayjs(new Date(filters.endTime)).format("HH:mm") === dayjs(now).format("HH:mm")){
        const s = now.getSeconds();
        const tempArr = [];
        for (let i = 60; i > s; i--) {
			tempArr.push(i);
		}
        return tempArr;
    }
    return [];
};
</script>

究极使用方法,抽成一个组件

// utils.js
/**
 * 
 * @param {选择时回调传入的时间} time 
 * @param {记录的开始时间} startDateTime 
 * @param {结束时间} endDateTime 
 * @param {是否需要判断要早于当前时间} judgeCurrentTime 
 * @returns 
 */
startPickerOptions(time, startDateTime, endDateTime, judgeCurrentTime = true) {
    const limits = {
        disabledDate: false,
        disabledHour: [],
        disabledMinute: [],
        disabledSecond: [],
    };
    const now = new Date();
    if (judgeCurrentTime) {
        if(time){
            if (!endDateTime) 
            {
                limits.disabledDate = time.getTime() > Date.now(); // 禁用今天之前的日期
            } 
            else{
                limits.disabledDate =
                    time.getTime() > new Date(endDateTime).getTime() ||
                    time.getTime() > now;
            }
        }
        // 如果当前日期为当前日期,禁用当前时间之前的小时
        if (
            dayjs(new Date(startDateTime)).format("YYYY-MM-DD") ===
            dayjs(new Date(endDateTime)).format("YYYY-MM-DD")
        ) {
            let h = dayjs(new Date(endDateTime)).hour();
            if (
                dayjs(new Date(startDateTime)).format("YYYY-MM-DD") ===
                dayjs(now).format("YYYY-MM-DD")
            ) {
                h = h > now.getHours() ? now.getHours() : h;
            }
            const tempArr = [];
            for (let i = 24; i > h; i--) {
                tempArr.push(i);
            }
            limits.disabledHour = tempArr;
        }
        // 如果当前日期为当前日期,禁用当前时间之前的小时
        if (
            dayjs(new Date(startDateTime)).format("YYYY-MM-DD") ===
            dayjs(now).format("YYYY-MM-DD")
        ) {
            const h = now.getHours();
            const tempArr = [];
            for (let i = 24; i > h; i--) {
                tempArr.push(i);
            }
            limits.disabledHour = tempArr;
        }
        // 如果当前日期为当前日期并且是当前小时,禁用当前时间之前的分钟
        if (
            dayjs(new Date(startDateTime)).format("YYYY-MM-DD HH") ===
            dayjs(new Date(endDateTime)).format("YYYY-MM-DD HH")
        ) {
            let m = dayjs(new Date(endDateTime)).minute();
            if (
                dayjs(new Date(startDateTime)).format("YYYY-MM-DD") ===
                dayjs(now).format("YYYY-MM-DD")
            ) {
                m = m > now.getMinutes() ? now.getMinutes() : m;
            }
            const tempArr = [];
            for (let i = 60; i > m; i--) {
                tempArr.push(i);
            }
            limits.disabledMinute = tempArr;
        }
        // 如果当前日期为当前日期并且是当前小时,禁用当前时间之前的分钟
        if (
            dayjs(new Date(startDateTime)).format("YYYY-MM-DD") ===
                dayjs(now).format("YYYY-MM-DD") &&
            dayjs(new Date(startDateTime)).format("HH") ===
                dayjs(now).format("HH")
        ) {
            const m = now.getMinutes();
            const tempArr = [];
            for (let i = 60; i > m; i--) {
                tempArr.push(i);
            }
            limits.disabledMinute = tempArr;
        }
        // 如果当前日期为当前日期并且是当前小时当前分钟,禁用当前时间之前的秒
        if (
            dayjs(new Date(startDateTime)).format("YYYY-MM-DD HH:mm") ===
            dayjs(new Date(endDateTime)).format("YYYY-MM-DD HH:mm")
        ) {
            let s = dayjs(new Date(endDateTime)).second();
            if (
                dayjs(new Date(startDateTime)).format("YYYY-MM-DD") ===
                dayjs(now).format("YYYY-MM-DD")
            ) {
                s = s > now.getSeconds() ? now.getSeconds() : s;
            }
            const tempArr = [];
            for (let i = 60; i >= s; i--) {
                tempArr.push(i);
            }
            limits.disabledSecond = tempArr;
        }
        // 如果当前日期为当前日期并且是当前小时当前分钟,禁用当前时间之前的秒
        if (
            dayjs(new Date(startDateTime)).format("YYYY-MM-DD") ===
                dayjs(now).format("YYYY-MM-DD") &&
            dayjs(new Date(startDateTime)).format("HH:mm") ===
                dayjs(now).format("HH:mm")
        ) {
            const s = now.getSeconds();
            const tempArr = [];
            for (let i = 60; i > s; i--) {
                tempArr.push(i);
            }
            limits.disabledSecond = tempArr;
        }
    } else {
        if(time){
            if (!endDateTime){
                limits.disabledDate = false;
            } 
            else
            {
                limits.disabledDate = time.getTime() > new Date(endDateTime).getTime();
            }
        }
        // 如果当前日期为当前日期,禁用当前时间之前的小时
        if (
            dayjs(new Date(startDateTime)).format("YYYY-MM-DD") ===
            dayjs(new Date(endDateTime)).format("YYYY-MM-DD")
        ) {
            let h = dayjs(new Date(endDateTime)).hour();
            const tempArr = [];
            for (let i = 24; i > h; i--) {
                tempArr.push(i);
            }
            limits.disabledHour = tempArr;
        }
        // 如果当前日期为当前日期并且是当前小时,禁用当前时间之前的分钟
        if (
            dayjs(new Date(startDateTime)).format("YYYY-MM-DD HH") ===
            dayjs(new Date(endDateTime)).format("YYYY-MM-DD HH")
        ) {
            let m = dayjs(new Date(endDateTime)).minute();
            const tempArr = [];
            for (let i = 60; i > m; i--) {
                tempArr.push(i);
            }
            limits.disabledMinute = tempArr;
        }
        // 如果当前日期为当前日期并且是当前小时当前分钟,禁用当前时间之前的秒
        if (
            dayjs(new Date(startDateTime)).format("YYYY-MM-DD HH:mm") ===
            dayjs(new Date(endDateTime)).format("YYYY-MM-DD HH:mm")
        ) {
            let s = dayjs(new Date(endDateTime)).second();
            const tempArr = [];
            for (let i = 60; i >= s; i--) {
                tempArr.push(i);
            }
            limits.disabledSecond = tempArr;
        }
    }
    return limits;
}
// 结束时间的调用方法
endPickerOptions(time, startDateTime, endDateTime, judgeCurrentTime = true) {
    const limits = {
        disabledDate: false,
        disabledHour: [],
        disabledMinute: [],
        disabledSecond: [],
    };
    const now = new Date();
    if (judgeCurrentTime) {
        if(time){
            if (!startDateTime) {
                limits.disabledDate = time.getTime() > Date.now();
            }
            else{
                limits.disabledDate = 
                    dayjs(new Date(time.getTime())).format("YYYY-MM-DD") < dayjs(startDateTime).format("YYYY-MM-DD") ||
                    time.getTime() > now
            }
        }
        // 如果当前日期为当前日期,禁用当前时间之前的小时
        if (
            dayjs(new Date(startDateTime)).format("YYYY-MM-DD") ===
            dayjs(new Date(endDateTime)).format("YYYY-MM-DD")
        ) {
            const h = dayjs(new Date(startDateTime)).hour();
            const tempArr = [];
            for (let i = 0; i < h; i++) {
                tempArr.push(i);
            }
            if (
                dayjs(new Date(endDateTime)).format("YYYY-MM-DD") ===
                dayjs(now).format("YYYY-MM-DD")
            ) {
                for (let i = 24; i > now.getHours(); i--) {
                    tempArr.push(i);
                }
            }
            limits.disabledHour = tempArr;
        }
        else if (
            dayjs(new Date(endDateTime)).format("YYYY-MM-DD") ===
            dayjs(now).format("YYYY-MM-DD")
        ) {
            const h = now.getHours();
            const tempArr = [];
            for (let i = 24; i > h; i--) {
                tempArr.push(i);
            }
            limits.disabledHour = tempArr;
        }
        // 如果当前日期为当前日期并且是当前小时,禁用当前时间之前的分钟
        if (
            dayjs(new Date(startDateTime)).format("YYYY-MM-DD HH") ===
            dayjs(new Date(endDateTime)).format("YYYY-MM-DD HH")
        ) {
            const m = dayjs(new Date(startDateTime)).minute();
            const tempArr = [];
            for (let i = 0; i < m; i++) {
                tempArr.push(i);
            }
            if (
                dayjs(new Date(endDateTime)).format("YYYY-MM-DD") ===
                dayjs(now).format("YYYY-MM-DD")
            ) {
                for (let i = 60; i > now.getMinutes(); i--) {
                    tempArr.push(i);
                }
            }
            limits.disabledMinute = tempArr;
        }
        else if (
            dayjs(new Date(endDateTime)).format("YYYY-MM-DD") ===
                dayjs(now).format("YYYY-MM-DD") &&
            dayjs(new Date(endDateTime)).format("HH") ===
                dayjs(now).format("HH")
        ) {
            const m = now.getMinutes();
            const tempArr = [];
            for (let i = 60; i > m; i--) {
                tempArr.push(i);
            }
            limits.disabledMinute = tempArr;
        }
        // 如果当前日期为当前日期并且是当前小时当前分钟,禁用当前时间之前的秒
        if (
            dayjs(new Date(startDateTime)).format("YYYY-MM-DD HH:mm") ===
            dayjs(new Date(endDateTime)).format("YYYY-MM-DD HH:mm")
        ) {
            const s = dayjs(new Date(startDateTime)).second();
            const tempArr = [];
            for (let i = 0; i <= s; i++) {
                tempArr.push(i);
            }
            if (
                dayjs(new Date(endDateTime)).format("YYYY-MM-DD") ===
                dayjs(now).format("YYYY-MM-DD")
            ) {
                for (let i = 60; i > now.getSeconds(); i--) {
                    tempArr.push(i);
                }
            }
            limits.disabledSecond = tempArr;
        }
        else if (
            dayjs(new Date(endDateTime)).format("YYYY-MM-DD") ===
                dayjs(now).format("YYYY-MM-DD") &&
            dayjs(new Date(endDateTime)).format("HH:mm") ===
                dayjs(now).format("HH:mm")
        ) {
            const s = now.getSeconds();
            const tempArr = [];
            for (let i = 60; i > s; i--) {
                tempArr.push(i);
            }
            limits.disabledSecond = tempArr;
        }
    }
    else{
        if(time){
            if (!startDateTime){
                limits.disabledDate = false;
            } 
            else{
                limits.disabledDate = dayjs(new Date(time.getTime())).format("YYYY-MM-DD") < dayjs(startDateTime).format("YYYY-MM-DD");
            }
        }
        // 如果当前日期为当前日期,禁用当前时间之前的小时
        if (
            dayjs(new Date(startDateTime)).format("YYYY-MM-DD") ===
            dayjs(new Date(endDateTime)).format("YYYY-MM-DD")
        ) {
            const h = dayjs(new Date(startDateTime)).hour();
            const tempArr = [];
            for (let i = 0; i < h; i++) {
                tempArr.push(i);
            }
            limits.disabledHour = tempArr;
        }
        // 如果当前日期为当前日期并且是当前小时,禁用当前时间之前的分钟
        if (
            dayjs(new Date(startDateTime)).format("YYYY-MM-DD HH") ===
            dayjs(new Date(endDateTime)).format("YYYY-MM-DD HH")
        ) {
            const m = dayjs(new Date(startDateTime)).minute();
            const tempArr = [];
            for (let i = 0; i < m; i++) {
                tempArr.push(i);
            }
            limits.disabledMinute = tempArr;
        }
            // 如果当前日期为当前日期并且是当前小时当前分钟,禁用当前时间之前的秒
            if (
            dayjs(new Date(startDateTime)).format("YYYY-MM-DD HH:mm") ===
            dayjs(new Date(endDateTime)).format("YYYY-MM-DD HH:mm")
        ) {
            const s = dayjs(new Date(startDateTime)).second();
            const tempArr = [];
            for (let i = 0; i <= s; i++) {
                tempArr.push(i);
            }
            limits.disabledSecond = tempArr;
        }
    }
    return limits;
}

使用方法

<el-form-item label="开始时间">
    <el-date-picker
        v-model="filters.checkDateBegin"
        type="datetime"
        placeholder="请选择开始时间"
        :disabled-date="(time) =>  utils.startPickerOptions(time, filters.checkDateBegin, filters.checkDateEnd).disabledDate"
        :disabled-hours="()=> utils.startPickerOptions('', filters.checkDateBegin, filters.checkDateEnd).disabledHour"
        :disabled-minutes="()=> utils.startPickerOptions('', filters.checkDateBegin, filters.checkDateEnd).disabledMinute"
        :disabled-seconds="()=> utils.startPickerOptions('', filters.checkDateBegin, filters.checkDateEnd).disabledSecond"
        format="YYYY-MM-DD HH:mm:ss"
        value-format="YYYY-MM-DD HH:mm:ss"
    />
</el-form-item>
<el-form-item label="结束时间">
    <el-date-picker
        v-model="filters.checkDateEnd"
        type="datetime"
        placeholder="请选择结束时间"
        :disabled-date="(time) =>  utils.endPickerOptions(time, filters.checkDateBegin, filters.checkDateEnd).disabledDate"
        :disabled-hours="()=> utils.endPickerOptions('', filters.checkDateBegin, filters.checkDateEnd).disabledHour"
        :disabled-minutes="()=> utils.endPickerOptions('', filters.checkDateBegin, filters.checkDateEnd).disabledMinute"
        :disabled-seconds="()=> utils.endPickerOptions('', filters.checkDateBegin, filters.checkDateEnd).disabledSecond"
        format="YYYY-MM-DD HH:mm:ss"
        value-format="YYYY-MM-DD HH:mm:ss"
    />
</el-form-item>