如何在单击时清除按钮上的日期范围选择器值？答案

【问题标题】：how to clear date range picker values on Button on click?如何在单击时清除按钮上的日期范围选择器值？
【发布时间】：2021-07-17 14:12:33
【问题描述】：

这是我的代码，我有日期范围选择器和一个清除按钮。当我单击清除按钮时，状态会发生变化（更改为空值），我想在 UI 中显示它。如何设置日期范围选择器的值以显示它？

const [para, _setPara] = useState({
  startDate: null,
  endDate:null
} as any);

const onChange =(date:any, dateString:any) =>{
    setPara({
      startDate:date[0].format("YYYY-MM-DD HH:mm:ss"),
      endDate: date[1].format("YYYY-MM-DD HH:mm:ss")
    })
}

const clearSearch =()=>{
  setPara({
    startDate: null,
    endDate:null
  })
}

return(
<RangePicker onChange={onChange} allowClear={false} value={?} />
<Button
   type="primary"
   onClick={() => clearSearch()}
   danger
>
)

【问题讨论】：

您是否尝试将值设置为空白？
为什么不想使用原生清除按钮？
我有更多输入，想使用清除按钮。这就是为什么我不想使用原生清除按钮@NadiaChibrikova
不，我不知道如何在那里设置值！这就是我要问的@AmalDev

标签： javascript typescript antd date-range

【解决方案1】：

您在onChange 中获得的值与组件期望的格式相同，因此您需要将其保持原样并在需要时转换为字符串，或者保留字符串处于状态并在每次渲染时转换为正确的格式。您可以传递数组中的值

<RangePicker onChange={onChange} allowClear={false} value={[moment1,moment2]} />

要从字符串创建时刻，您需要导入 moment 并使用您正在使用的日期格式调用它：

import moment from 'moment';
...
const moment1=moment(startDate,"YYYY-MM-DD HH:mm:ss")

要清除，只需将两个时刻都设置为null

【讨论】：