Skip to content
Advertisement

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

ttt

This is my code and I have date range picker and a clear button. when I click on the clear button the state get changed(changed to null values) and I want to show it in the UI. how can I set the value of date range picker to show it ?

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
>
)

Advertisement

Answer

The value you get in the onChange is in the same format as the component expects it, so you either need to keep it in the state as it is and convert to string when you need it, or you keep the string in the state and convert to the correct format on each render. You can pass the values in an array

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

To create a moment from string you need to import moment and call it with the date format you’re using:

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

to clear just set the both moments to null

Advertisement