javascript - Clear date picker component after pressing clear button in antd

Question

We are using antd for datepicker and moments as util. I'm stuck for a week in this ISSUE.The thing is, in the filter sidepanel,on pressing clear,all the fields should clear or set to their default values(in case of dropdown).But the date picket is not resetting.

The above picture is the Activity component and left side to its his the filter.A basic filter with API change from backend on every action event.

useEffect(()=>{
    if(clearFilter){
      form.resetFields()
      setActivitySearchText('')
      setFromDate('')
      setToDate('')
      setStatusSearchText('')
      onStatusChange('')
      setClearFilter(false)
    }
  },[clearFilter])

const onChangeFromDate = dateString => {
    setFromDate(new Date(dateString).toISOString())
  }

  const onPageToDate = dateString => {
    setToDate(new Date(dateString).toISOString())
  }

<StyledDatePicker
          allowClear={false}
          format={dateFormat}
          disabledDate={disabledFromDate}
          placeholder={'From'}
          onChange={(fromdate, dateString) =>
            onChangeFromDate(fromdate, dateString)
          }
          showTime={{
            use12Hours: true,
            defaultValue: moment('00:00:00', 'HH:mm:ss'),
          }}
        />
        <StyledDatePicker
          format={dateFormat}
          disabledDate={disabledToDate}
          placeholder={'To'}
          onChange={(todate, dateString) => onPageToDate(todate, dateString)}
          showTime={{ use12Hours: true }}
        />

The above code is the index file for all the components,we'll be passing clearfilter prop,if its true ,the filter components are set to empty.The StyledDatePicker is just wrapped in styled components of some custom width.that's it.

You can clearly see,onChangeFromDate() and onPageToDate() are the event functions happening on Change,onChange. As I said above,I'm setting the setFromDate('') and setTodate('') when clearFilter is true.

To give some context,this another main file,from which the props are passed to the others.In there,we are defining setFromDate('') and setTodate('') as,

const [fromDate, setFromDate] = useState('')
  const [toDate, setToDate] = useState('')

I think I've given enough details. If need anything, request, I'm ready to give. This is a live project, I'm stuck for a week.Thanks in advance!

question from:https://stackoverflow.com/questions/65942879/clear-date-picker-component-after-pressing-clear-button-in-antd

Answer 1

Waitting for answers