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

Question

这是我的代码，我有日期范围选择器和清除按钮。当我单击清除按钮时，状态发生变化（更改为空值），我想在 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
>
)

Answer 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

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

how to clear date range picker values on Button on click?

javascript

date-range

typescript

antd