What should I do to clear date input?, I have button that if the user clicked, it will clear the date.

  const [startdate, setStartDate] = useState();
  const [endDate, setEndDate] = useState();


  const onChangedate = (e) => {
      let startDate = convertDate(e.startDate);
      let endDate = convertDate(e.endDate);
      setStartDate(startDate);
      setEndDate(endDate);
  }; 
  const handleClearfilter = () =>{
    setStartDate("");
    setEndDate("");
  }

  <DateRangePickerComponent   placeholder='Select a range' change={onChangedate} 
              style={{paddingTop: 10, fontSize: 16}}
              />


 <Button 
    onClick={handleClearfilter}
  >
  Clear All
  </Button>

What should I do to clear date input?, I have button that if the user clicked, it will clear the date.

  const [startdate, setStartDate] = useState();
  const [endDate, setEndDate] = useState();


  const onChangedate = (e) => {
      let startDate = convertDate(e.startDate);
      let endDate = convertDate(e.endDate);
      setStartDate(startDate);
      setEndDate(endDate);
  }; 
  const handleClearfilter = () =>{
    setStartDate("");
    setEndDate("");
  }

  <DateRangePickerComponent   placeholder='Select a range' change={onChangedate} 
              style={{paddingTop: 10, fontSize: 16}}
              />


 <Button 
    onClick={handleClearfilter}
  >
  Clear All
  </Button>

• javascript
• reactjs

Share Improve this question Follow asked Oct 12, 2021 at 6:55 May YieMay Yie 8711 silver badge1111 bronze badges 3

• Is the issue that DateRangePickerComponent is uncontrolled and holding on to the inputted values? – Drew Reese Commented Oct 12, 2021 at 6:57
• 1 any runnable code like codesandbox or Jsfiddle or codepen?? – Md. Abu Sayed Commented Oct 12, 2021 at 6:58
• 1 If it is a third-party ponent please check their documentation. If you have created it yourself please handle it yourself. – Shivam Kumar Commented Oct 12, 2021 at 6:59

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

I suggest using a React key to "reset" the uncontrolled input. When the React key changes React will throw away the old version and mount a new "instance".

See fully uncontrolled ponent with a key for example and deeper explanation.

const [key, setKey] = useState(false);

...

const handleClearfilter = () =>{
  setStartDate("");
  setEndDate("");
  setKey(k => !k); // toggle React key value
}

<DateRangePickerComponent
  key={key} // <-- attach React key
  placeholder='Select a range'
  change={onChangedate} 
  style={{paddingTop: 10, fontSize: 16}}
/>

If you want to control the ponent, you have to feed in the values yourself. The docs show that you require two date values since it is a data range input.

  const [startdate, setStartDate] = useState();
  const [endDate, setEndDate] = useState();


  const onChangedate = (e) => {
      let startDate = convertDate(e.startDate);
      let endDate = convertDate(e.endDate);
      setStartDate(startDate);
      setEndDate(endDate);
  }; 
  const handleClearfilter = () =>{
    setStartDate("");
    setEndDate("");
  }

  <DateRangePickerComponent   placeholder='Select a range' change={onChangedate}   startDate={startDate} endDate={endDate}
              style={{paddingTop: 10, fontSize: 16}}
              />


 <Button 
    onClick={handleClearfilter}
  >
  Clear All
  </Button>