美文网首页
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