How to disable the past and future dates in react-datetime

Today we’ll show you how to disable the past and future dates in react-datetime. As you know in the previous article we had learned about the integration of the datetime picker in ReactJS.

react-datetime picker github, react-datepicker disable past dates, react-datetime disable past dates, react-dates disable future dates, disable current date and time in react js, Disable previous Dates on schedule calendar of react js, React Datepicker exclude past dates, Exclude future dates from a given date using React, How to Datepicker picks future dates only and disable past date in react datetime.

Steps to disable the dates in react-datetime

  1. Add react-datetime in React app
  2. Disable the past dates
  3. Disable the future dates
  4. Disable the weekends
  5. Disable the list of custom dates
  6. Output

1. Add react-datetime in React app

In the first step, we have to add the react-datetime in the React application. If you don’t know how to integrate datetime picker then refer to this link.

2. Disable the past dates

To disable the dates, we have to use the isValidDate property of the react-datetime.

As per the documentation, isValidDate is the function and by default is returning the true value.

Define the dates that can be selected. The function receives (currentDate, selectedDate) and shall return a true or false whether the currentDate is valid or not. See selectable dates.

Check the following code to disable the past dates.

In the above code, we used the isAfter function to validate the dates.

3. Disable the future dates

Check the below code to disable the future dates.

4. Disable the weekends

Now let’s try to disable the weekends. Here we use the day() function to achieve the goal.

5. Disable the list of custom dates

At the last, we are going to show you how to disable the list of custom dates. Here we will consider the list of custom dates and try to disable it.

6. Output

Let’s combine all code together and check the output in the browser.

App.js

Output - How to disable the past and future dates in react-datetime - Clue Mediator
Output – How to disable the past and future dates in react-datetime – Clue Mediator

That’s it for today.
Thank you for reading. Happy Coding!

Demo & Source Code

Github Repository StackBlitz Project

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *