Cancel the entered data in the calendar-CodePudding

At the moment, there is a calendar on my site where the user can select a time range and data filtering will be done. For this I use the react-advanced-datetimerange-picker library.

But there is one drawback. You cannot cancel the selected data without reloading the page. Please tell me how to make a button (example near close button) that will allow you to reset the entered filters and get the entire list of data again.

Here I have given a simplified example of my code

https://codesandbox.io/s/admiring-currying-32gvd2

CodePudding user response：

I created a function called resetDate which when clicked return the Calendar to its initial value, please check.

https://codesandbox.io/s/proud-architecture-9v7e84

CodePudding user response：

You can reset your calendar by remount FiltersSideBar component, just by change key prop

App.js

function FiltersSideBar() {
  const start = moment().startOf("day");
  const end = moment(start).add(1, "days").subtract(1, "seconds");
  const [time, setTime] = useState({ start, end });

  return <FilterDateTime time={time} setTime={setTime} />;
}

const App = () => {
  const [reset, setReset] = useState(false);
  return (
    <div>
      <FiltersSideBar key={reset} />
      <button onClick={() => setReset(!reset)}>Reset</button>
    </div>
  );
};

export default App;

codesandbox. Hope it help!