ant-design/components/date-picker/demo/select-in-range.md

order	title
6.1	zh-CN en-US 选择不超过七天的范围 Select range dates in 7 days

zh-CN

这里举例如何用 onCalendarChange 和 disabledDate 来限制动态的日期区间选择。

en-US

A example shows how to select a dynamic range by using onCalendarChange and disabledDate.

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

const { RangePicker } = DatePicker;

const App = () => {
  const [dates, setDates] = useState([]);
  const disabledDate = current => {
    if (!dates || dates.length === 0) {
      return false;
    }
    const tooLate = dates[0] && current.diff(dates[0], 'days') > 7;
    const tooEarly = dates[1] && dates[1].diff(current, 'days') > 7;
    return tooEarly || tooLate;
  };

  return (
    <RangePicker
      disabledDate={disabledDate}
      onCalendarChange={value => {
        setDates(value);
      }}
      onOpenChange={open => {
        if (!open) {
          setDates([]);
        }
      }}
    />
  );
};

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