diff --git a/components/date-picker/demo/select-in-range.md b/components/date-picker/demo/select-in-range.md
index c37cdeba7c..22cb8244e6 100644
--- a/components/date-picker/demo/select-in-range.md
+++ b/components/date-picker/demo/select-in-range.md
@@ -21,6 +21,8 @@ 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 false;
@@ -30,14 +32,22 @@ const App = () => {
     return tooEarly || tooLate;
   };
 
+  const onOpenChange = open => {
+    if (open) {
+      setHackValue([]);
+      setDates([]);
+    } else {
+      setHackValue(undefined);
+    }
+  };
+
   return (
     <RangePicker
+      value={hackValue || value}
       disabledDate={disabledDate}
-      onCalendarChange={value => {
-        const [start, end] = value;
-        const [oldStart, oldEnd] = dates;
-        setDates([start || oldStart, end || oldEnd]);
-      }}
+      onCalendarChange={val => setDates(val)}
+      onChange={val => setValue(val)}
+      onOpenChange={onOpenChange}
     />
   );
 };