React， typescript， UI库 ant-design

参考文档： 日期选择框 DatePicker - Ant Design

描述：两个控件 DatePicker 选择一个日期 ，RangePicker的不可选择日期 由默认的未来日期（包含今天）不能选择，变为DatePicker选择日期（包含选择日期）之后的不能选择

代码

// TypeScript
return (<RangePicker
    onChange={onRangeDateChange}
    disabledDate={disabledDate}
/>)
return (<DatePicker
    showTime
    showNow={false}
    format="YYYY-MM-DD HH:mm"
    disabledDate={disabledDateTime}
    disabledTime={disabledTime as any} 
    onChange={onDateTimeChange}
/>)

// 引入
import { useEffect, useState } from "react"
import { DatePicker } from 'antd'
import dayjs from 'dayjs'
import customParseFormat from 'dayjs/plugin/customParseFormat'
import moment, { Moment } from "moment"

// 方法/函数组件外部定义
dayjs.extend(customParseFormat)
const { RangePicker } = DatePicker
type RangeValue = [Moment | null, Moment | null] | null // typescript

// 方法/函数组件内部定义
// 定义一个变量 dates，类型为RangeValue，赋初始值为null
const [dates, setDates] = useState<RangeValue>(null)

// 方法
// DatePicker 选择一个指定日期时间，触发onDateTimeChange方法
const onDateTimeChange = (date: any, dateString: string) => {
    if (dateString) {
      // 如果选择了日期时间，因为我们只要日期，截取前10位字符是日期。 赋值给dates的结束日期
      // 因为另一个组件是rangePicker，所以是[]，这里赋值给结束日期
      setDates([null, moment(dateString.slice(0, 11), dateFormat)])
    } else {
      setDates(null)
    }
    form.setFieldsValue({ exec_time: dateString }) // 为了给form表单赋string类型日期值
  }

const disabledDate = (current: Moment) => {
    // Can not select days after today and today
    if (!dates) {
      // 如果datePicker没有选择日期时间，默认不可选今天及将来日期
      let currDate = current.format('YYYY-MM-DD')
      return current && currDate >= dayjs().endOf('day').format('YYYY-MM-DD')
    } else {
      const startDate = dates[0] ? dates[0] : current
      const endDate = dates[1] ? dates[1] : dayjs().endOf('day')
      return !(current >= startDate && current <= endDate)
    }
  }

效果

datepicker未指定日期时间

datepicker指定日期时间后，rangepicker 不可选择日期范围改变