Is it possible to make reset shortcut for date range picker?

[Ryandi-S]

Hello.
I'm using date picker & date range picker from rsuite 5.0.3. My team want a reset/clean button like this :

I can make it work with the date picker, bit not with the date range picker. It always got disable like this :

Is anyone know how to make reset/clean button using the ranges prop for date range picker? Thanks in advance

[SevenOutman]

Either DatePicker or DateRangePicker has a cleanable prop which, when set true, displays a "clear" button on the text box that can erase the selected value when clicked on. Does that satisfy what you want from a "reset" button?

[Ryandi-S]

Thanks for the response :)
Yes i tried it. The clear button that appear on the textbox works fine. But I requested to make the clear button to be below the picker, that's why i'm trying to put the reset button using ranges prop.

The code i used for DatePicker is as follow :

ranges={[
  {
    label: 'Reset',
    value: null
  }
]}

It works fine. I tried similiar with the DateRangePicker :

ranges={[
  {
    label: 'Reset',
    value: [null,null]
  }
]}

but it doesn't work. The button appears, but rendered as disabled (as in my previous DateRangePicker screenshot).

Is there something wrong from my code, or is it not possible to erase DateRangePicker value this way?

[simonguo]

This happens because invalid values are checked in DateRangePicker.
https://github.com/rsuite/rsuite/blob/main/src/DateRangePicker/DateRangePicker.tsx#L617

[Ryandi-S]

Ah, I see... so, it's not possible to pass an empty date value without making the button disabled?

[simonguo]

This is a requirement that we did not consider in our design. But there is a temporary solution.

const App = () => {
  const [value, setValue] = useState([]);
  return (
    <DateRangePicker
      value={value}
      ranges={[
        {
          label: 'clear',
          value: [1, 1]
        }
      ]}
      onChange={value => {
        if (value[0] === 1 && value[1] === 1) {
          setValue([]);
        } else {
          setValue(value);
        }
      }}
    />
  );
};

[Ryandi-S]

That works well for my needs! Thank you very much :)