🎬 Add RangePicker demo

close #22345

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}

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);
+```