antd4.x RangePicker开始时间与结束时间不能超过10个小时

131 阅读1分钟
import React, { useState } from 'react';
import { DatePicker, message } from 'antd';
import moment from 'moment';

export default () => {
    const [dates, setDates] = useState(null);
    
    const disabledDate = (current) => {
        // 如果没有选择开始时间,则不禁用任何时间段
        if (!dates || !dates[0]) {
            return null;
        }

        const [startDate, endDate] = dates;

        // 结束时间的
        if (startDate) {
            const newEndDate = moment(startDate.format('YYYY-MM-DD HH:mm:ss')).add(10, 'hours');
            return current.isAfter(newEndDate, 'days');
        }
        if (endDate) {
            const newStartDate = moment(startDate.format('YYYY-MM-DD HH:mm:ss')).subtract(10, 'hours');
            return current.isBefore(newStartDate, 'days');
        }
    };

    const disabledTime = (_date, type) => {
        // 如果没有选择开始时间,则不禁用任何时间段
        if (!dates || !dates[0]) {
            return null;
        }
        // 获取开始时间和结束时间
        const [startDate, endDate] = dates;

        // 如果是选择开始时间
        if (type === 'start') {
            // 计算结束时间最小值
            const limitTime = endDate
                ? moment(endDate).subtract(10, 'hours')
                : moment().subtract(10, 'hours');

            return {
                disabledHours: () => {
                    const hours = [];
                    for (let i = 0; i < 24; i++) {
                        if (i < moment().hour() || i > limitTime.hour()) {
                            hours.push(i);
                        }
                    }
                    return hours;
                },
                disabledMinutes: (hour) => {
                    if (hour < moment().hour() || hour > limitTime.hour()) {
                        return Array.from({ length: 60 }, (_date, i) => i);
                    }
                    const endMinute = endDate ? moment(endDate).minute() : 59;
                    const minutes = [];

                    for (let i = 0; i < 60; i++) {
                        if (hour === moment().hour() && i < moment().minute()) {
                            continue;
                        }

                        if (
                            (hour === limitTime.hour() && i > limitTime.minute()) ||
                            (hour === moment(endDate).hour() && i > endMinute)
                        ) {
                            minutes.push(i);
                        }
                    }
                    return minutes;
                },
                disabledSeconds: (hour, minute) => {
                    if (
                        hour < moment().hour() ||
                        (hour === moment().hour() && minute < moment().minute()) ||
                        hour > limitTime.hour() ||
                        (hour === moment(endDate).hour() && minute > moment(endDate).minute())
                    ) {
                        return Array.from({ length: 60 }, (_date, i) => i);
                    }

                    return [];
                },
            };
        } else if (type === 'end') {
            // 计算开始时间最大值
            const startOfDay = moment(startDate).startOf('day');
            const limitTime = moment(startDate).add(10, 'hours');

            return {
                disabledHours: () => {
                    const hours = [];
                    for (let i = 0; i < 24; i++) {
                        if (i < startOfDay.hour() || i > limitTime.hour()) {
                            hours.push(i);
                        }
                    }
                    return hours;
                },
                disabledMinutes: (hour) => {
                    if (hour < startOfDay.hour() || hour > limitTime.hour()) {
                        return Array.from({ length: 60 }, (_date, i) => i);
                    }
                    const startMinute = moment(startDate).minute();
                    const minutes = [];

                    for (let i = 0; i < 60; i++) {
                        if (hour === startOfDay.hour() && i < startMinute) {
                            continue;
                        }
                        if (
                            (hour === limitTime.hour() && i > limitTime.minute()) ||
                            (endDate &&
                                hour === moment(endDate).hour() &&
                                i >= moment(endDate).minute())
                        ) {
                            minutes.push(i);
                        }
                    }
                    return minutes;
                },
                disabledSeconds: (hour, minute) => {
                    if (
                        hour < startOfDay.hour() ||
                        (hour === startOfDay.hour() && minute < startOfDay.minute()) ||
                        hour > limitTime.hour() ||
                        (endDate &&
                            hour === moment(endDate).hour() &&
                            minute >= moment(endDate).minute())
                    ) {
                        return Array.from({ length: 60 }, (_date, i) => i);
                    }
                    return [];
                },
            };
        }
    };
    
    return (
        <DatePicker.RangePicker
            placeholder={['开始时间', '结束时间']}
            showTime
            disabledDate={disabledDate}
            disabledTime={disabledTime}
            onCalendarChange={(val) => {
                if (val) {
                    const [start] = val;
                    if (!start) return message.warning('开始时间不能为空');
                }
                setDates(val);
            }}
            onOpenChange={(open) => {
                if (!open && dates) {
                    const [start, end] = dates;
                    if (!start || !end) {
                        setDates(null);
                    }
                }
            }}
            style={{ width: '100%' }}
        />
    );
};

image.png