fix(DateInputRange): 表单中使用清除无效问题 (#808)

Author: nullptr-z

packages/react-date-input/README.md

@@ -91,12 +91,12 @@ function Demo(){
         if (current.date) {
           Notify.success({
             title: '提交成功！',
-            description: `表单提交时间成功，时间为：${current.date}`,
+            description: `表单提交时间成功，时间为：${current.date} range:${current.dateRange}`,
           });
         } else {
           Notify.error({
             title: '提交失败！',
-            description: `表单提交时间成功，时间为：${current.date}，将自动填充初始化值！`,
+            description: `表单提交时间成功，时间为：${current.date} range:${current.dateRange}，将自动填充初始化值！`,
           });
         }
       }}
@@ -123,6 +123,7 @@ function Demo(){
             </Row>
             <Row style={{ width: 200 }} >
               <Col fixed>{fields.dateRange}</Col>
+              <Col fixed>{JSON.stringify(state)}</Col>
             </Row>
             <Row gutter={10}>
               <Col>

packages/react-date-input/src/DateInputRange.tsx

@@ -50,6 +50,11 @@ export function DateInputRange<V extends string | Date>(props: DateInputRangePro
     onChange && onChange(cdate, changeValue);
   }
 
+  function clearDateRange() {
+    setDateRange([]);
+    onChange && onChange(undefined, []);
+  }
+
   return (
     <div
       className={[`${prefixCls}-contents`, `${prefixCls}-inner`].filter(Boolean).join(' ').trim()}
@@ -105,7 +110,7 @@ export function DateInputRange<V extends string | Date>(props: DateInputRangePro
         />
       </Popover>
       {allowClear && dateRange.length > 0 && (
-        <Icon className={`${prefixCls}-close-btn`} color="#ccc" onClick={() => setDateRange([])} type="close" />
+        <Icon className={`${prefixCls}-close-btn`} color="#a5a5a5" onClick={() => clearDateRange()} type="close" />
       )}
     </div>
   );