美文网首页
VUE3+Element UI Plus控制日期时间组件做最大最

VUE3+Element UI Plus控制日期时间组件做最大最

作者: 新苡米 | 来源:发表于2022-09-09 13:43 被阅读0次

话不多说,上代码

 <ElDatePicker
                v-model="value"
                v-bind="computedProps"
                v-on="baseNode.getEvents()"
                style="width: 100%"
                :disabled-date="disabledDate"
                :disabled-hours="disabledHours"
                :disabled-minutes="disabledMinutes"
                :disabled-seconds="disabledSeconds"
            >
            </ElDatePicker>




export const useDiabledTime = (baseNode: DateTime) => {
    const maxPropDates = baseNode.max.value;
    const minPropDates = baseNode.min.value;
    const thisValue = baseNode.value;
    const isEvery = baseNode.computedProps.value.isEvery;
    const makeRange = (start: number, end: number) => {
        const result: number[] = [];
        for (let i = start; i <= end; i++) {
            result.push(i);
        }
        return result;
    };

    const maxDate = computed(() => {
        if (!dateUtils.isValid(maxPropDates)) {
            return undefined;
        }
        const max = maxPropDates + ' 23:59:59';
        if (dateUtils.isValid(max)) {
            return new Date(max);
        }
        if (!dateUtils.isValid(max) && maxPropDates !== null) {
            return new Date(maxPropDates);
        }
        return undefined;
    });
    const minDate = computed(() => {
        if (!dateUtils.isValid(minPropDates)) {
            return undefined;
        }
        const min = minPropDates + ' 00:00:00';
        if (dateUtils.isValid(min)) {
            return new Date(min);
        }
        if (!dateUtils.isValid(min) && minPropDates !== null) {
            return new Date(minPropDates);
        }
        return undefined;
    });
    const maxDates = maxDate.value;
    const minDates = minDate.value;
    // 判断日期
    const disabledDate = (date: Date) => {
        if (maxDates && minDates) {
            const min = minDates + ' 00:00:00';
            if (dateUtils.isValid(min)) {
                return (
                    date.getTime() > new Date(maxDates).getTime() ||
                    date.getTime() < new Date(minDates).getTime()
                );
            }
            return (
                date.getTime() > new Date(maxDates).getTime() ||
                date.getTime() < new Date(minDates).getTime() - 3600 * 1000 * 24 * 1
            );
        }
        if (maxDates) {
            return date.getTime() > new Date(maxDates).getTime();
        }
        if (minDates) {
            const min = minDates + ' 00:00:00';
            if (dateUtils.isValid(min)) {
                return date.getTime() < new Date(minDates).getTime();
            }
            return date.getTime() < new Date(minDates).getTime() - 3600 * 1000 * 24 * 1;
        }
        return false;
    };
    // 判断小时
    const disabledHours = () => {
        const isMaxDate = isSame(maxDates, thisValue.value, 'd');
        const isMinDate = isSame(minDates, thisValue.value, 'd');
        const max = maxDates?.getHours();
        const min = minDates?.getHours();
        if (min === undefined && max === undefined) {
            return [];
        }
        if (!isEvery) {
            if (max !== undefined && isMaxDate) {
                return makeRange(max + 1, 23);
            }
            if (min !== undefined && isMinDate) {
                return makeRange(0, min - 1);
            }
            return [];
        }

        if (min === undefined && max !== undefined) {
            return makeRange(max + 1, 23);
        }
        if (min !== undefined && max === undefined) {
            return makeRange(0, min - 1);
        }
        if (min > max) return [];
        return makeRange(0, min - 1).concat(makeRange(max + 1, 23));
    };
    // 判断分钟
    const disabledMinutes = (hour: number) => {
        const max = maxDates?.getHours();
        const min = minDates?.getHours();

        const maxMinute = maxDates?.getMinutes();
        const minMinute = minDates?.getMinutes();

        if (min === hour && minMinute !== undefined) {
            return makeRange(0, minMinute - 1);
        }

        if (max === hour && maxMinute !== undefined) {
            return makeRange(maxMinute + 1, 59);
        }

        return [];
    };
    // 判断秒
    const disabledSeconds = (hour: number, minute: number) => {
        const max = maxDates?.getHours();
        const min = minDates?.getHours();

        const maxMinute = maxDates?.getMinutes();
        const minMinute = minDates?.getMinutes();

        const maxSeconds = maxDates?.getSeconds();
        const minSeconds = minDates?.getSeconds();

        if (min === hour && minMinute === minute && minSeconds !== undefined) {
            return makeRange(0, minSeconds - 1);
        }

        if (max === hour && maxMinute === minute && maxSeconds !== undefined) {
            return makeRange(maxSeconds + 1, 59);
        }

        return [];
    };

    return {
        disabledSeconds,
        disabledMinutes,
        disabledHours,
        disabledDate,
    };
};

相关文章

网友评论

      本文标题:VUE3+Element UI Plus控制日期时间组件做最大最

      本文链接:https://www.haomeiwen.com/subject/luaanrtx.html