From e2c76ff9fb407bc5d9e35cf1909754f6a43754e2 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Wed, 18 Mar 2020 16:59:15 +0800
Subject: [PATCH] :clapper: Add RangePicker demo

close #22345
---
 components/date-picker/demo/disabled-date.md  |  1 +
 .../date-picker/demo/select-in-range.md       | 50 +++++++++++++++++++
 2 files changed, 51 insertions(+)
 create mode 100644 components/date-picker/demo/select-in-range.md

diff --git a/components/date-picker/demo/disabled-date.md b/components/date-picker/demo/disabled-date.md
index ee2cba2d05..8ed87cc727 100644
--- a/components/date-picker/demo/disabled-date.md
+++ b/components/date-picker/demo/disabled-date.md
@@ -66,6 +66,7 @@ ReactDOM.render(
     <br />
     <DatePicker picker="month" disabledDate={disabledDate} />
     <br />
+    <RangePicker disabledDate={disabledDate} />
     <RangePicker
       disabledDate={disabledDate}
       disabledTime={disabledRangeTime}
diff --git a/components/date-picker/demo/select-in-range.md b/components/date-picker/demo/select-in-range.md
new file mode 100644
index 0000000000..7f9709c1d8
--- /dev/null
+++ b/components/date-picker/demo/select-in-range.md
@@ -0,0 +1,50 @@
+---
+order: 6.1
+title:
+  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`.
+
+```jsx
+import React, { useState, useCallback } 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={dates => {
+        setDates(dates);
+      }}
+      onOpenChange={open => {
+        if (!open) {
+          setDates([]);
+        }
+      }}
+    />
+  );
+};
+
+ReactDOM.render(<App />, mountNode);
+```