RangePicker 实现30天内选择任意时间，动态禁用其他时间

需求

antd rangePicker，选择时间点任意时间30天内，其他时间禁用（不是当前时间的30天内）。

实现

import React, { useState, useCallback } from 'react';
import { DatePicker } from 'antc';
const { RangePicker } = DatePicker;

const Page: React.FC<IProps> = () => {
	
  const offsetDays = 2592000 * 1000; //最多选择范围30天ms
  const [selectStartTime, setSelectStartTime] = useState('');
  const [selectEndTime, setSelectEndTime] = useState('');
  
 // 获取选择的开始时间/结束时间
    const handleCalendar = (date: any, dateStrings: [string, string], info: { range: string }) => {
      if (date) {
        if (date[0] && info.range === 'start') {
          setSelectStartTime(date[0]);
          setSelectEndTime('');
        } else if (date[1] && info.range === 'end') {
          setSelectStartTime('');
          setSelectEndTime(date[1]);
        }
      } else {
        setSelectStartTime('');
        setSelectEndTime('');
      }
    };
  // 禁用30天以外的时间；区分先选择开始时间还是结束时间 
  const disabledDate = useCallback(
    (current: Moment) => {
      if (selectStartTime) {
        const selectV = moment(selectStartTime, 'YYYY-MM-DD').valueOf();
        return current.valueOf() > selectV + offsetDays;
      } else if (selectEndTime) {
        const selectV = moment(selectEndTime, 'YYYY-MM-DD').valueOf();
        return current.valueOf() < selectV - offsetDays;
      }
    },
    [selectStartTime, selectEndTime],
  );
    
  return (
      <RangePicker
      showTime
      format="YYYY-MM-DD HH:mm"
      onCalendarChange={handleCalendar}
      disabledDate={disabledDate}
    />
  )
};

export default Page;