antd RangePicker限制最大时间跨度31天

发布时间:2023年12月18日

antd RangePicker限制最大时间跨度31天

type RangeValue = [Moment | null, Moment | null] | null;
const {RangePicker} = DatePicker;

const dateFormat: string = 'YYYY-MM-DD';
const start = moment().subtract(7, 'day').startOf('day');
const end = moment().subtract(1, 'day').endOf('day');

<RangePicker
       allowClear={false}
       value={dates}
       disabledDate={disabledDate}
       onCalendarChange={val => setDates(val)}
       onOpenChange={onOpenChange}
       ormat={dateFormat}
/>

    const [timeRange, setTimeRange] = useState<RangeValue>([start, end]);
    const [dates, setDates] = useState<RangeValue>([start, end]);
    const disabledDate = (current: Moment) => {
        if (!dates) {
            return false;
        }
        const tooLate = dates[0] && current.diff(dates[0], 'days') > 31;
        const tooEarly = dates[1] && dates[1].diff(current, 'days') > 31;
        const isAfter = current && moment(current).isAfter();
        return !!tooEarly || !!tooLate || isAfter;
    };

    const onOpenChange = (open: boolean) => {
        if (open) {
            setDates([null, null]);
        }
        else if (dates?.filter(it => it)?.length < 2) {
            setTimeRange([start, end]);
            setDates([start, end]);
        }
        else if (dates?.filter(it => it)?.length === 2) {
            setTimeRange(dates);
        }
    };

文章来源:https://blog.csdn.net/weixin_41983443/article/details/135066835
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。