Antd DatePicker 限制日期

目录

1. 限制最大日期为明天

2. 日期限制选择跨度30天及以内，最早可选择距当前3个月前开始的数据

---

1. 限制最大日期为明天

          <DatePicker
            allowClear
            showTime
            format="YYYY-MM-DD HH:mm"
            placeholder="请选择时间"
            disabledDate={
              (current) => { // 限制最大日期为明天
                return current && current >= moment().add(1, 'day');
              }
            }
          />

2. 日期限制选择跨度30天及以内，最早可选择距当前3个月前开始的数据

import React, { useState } from 'react';
import { DatePicker } from 'antd';

const { RangePicker } = DatePicker;

const App = () => {
  const [dates, setDates] = useState([]);
  const [hackValue, setHackValue] = useState();
  const [value, setValue] = useState();
  const disabledDate = current => {
    if (!dates || dates.length === 0) {
      return current && current < moment().subtract(3, 'months');
    }
    const tooLate = dates[0] && current.diff(dates[0], 'days') > 7;
    const tooEarly = dates[1] && dates[1].diff(current, 'days') > 7;
    return tooEarly || tooLate;
  };

  const onOpenChange = open => {
    if (open) {
      setHackValue([]);
      setDates([]);
    } else {
      setHackValue(undefined);
    }
  };

  return (
    <RangePicker
      value={hackValue || value}
      disabledDate={disabledDate}
      onCalendarChange={val => setDates(val)}
      onChange={val => setValue(val)}
      onOpenChange={onOpenChange}
    />
  );
};

ReactDOM.render(<App />, mountNode);