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.

Checkout more articles on ReactJS

• How to implement pagination in ReactJS
• Socket.IO – How to implement Socket.IO in ReactJS – Part 3
• How to implement redux in React.js
• Add or remove input fields dynamically with ReactJS
• Implement Google Maps in ReactJS

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.

// disable past dates
const yesterday = moment().subtract(1, 'day');
const disablePastDt = current => {
  return current.isAfter(yesterday);
};

return (
  <DatePicker
    isValidDate={disablePastDt}
  />
);

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.

// disable future dates
const today = moment();
const disableFutureDt = current => {
  return current.isBefore(today)
}

return (
  <DatePicker
    isValidDate={disableFutureDt}
  />
);

4. Disable the weekends

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

// disable weekends
const disableWeekends = current => {
  return current.day() !== 0 && current.day() !== 6;
}

return (
  <DatePicker
    isValidDate={disableWeekends}
  />
);

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.

// disable the list of custom dates
const customDates = ['2020-04-08', '2020-04-04', '2020-04-02'];
const disableCustomDt = current => {
  return !customDates.includes(current.format('YYYY-MM-DD'));
}

return (
  <DatePicker
    isValidDate={disableCustomDt}
  />
);

6. Output

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

App.js

import React from 'react';
import DatePicker from 'react-datetime';
import moment from 'moment';
import 'react-datetime/css/react-datetime.css';

function App() {

  // disable past dates
  const yesterday = moment().subtract(1, 'day');
  const disablePastDt = current => {
    return current.isAfter(yesterday);
  };

  // disable future dates
  const today = moment();
  const disableFutureDt = current => {
    return current.isBefore(today)
  }

  // disable weekends
  const disableWeekends = current => {
    return current.day() !== 0 && current.day() !== 6;
  }

  // disable the list of custom dates
  const customDates = ['2020-04-08', '2020-04-04', '2020-04-02'];
  const disableCustomDt = current => {
    return !customDates.includes(current.format('YYYY-MM-DD'));
  }

  return (
    <div className="App">
      <h2>Disable dates in react-datetime - <a href="https://www.cluemediator.com" target="_blank">Clue Mediator</a></h2>

      <p className="title">Disable past dates:</p>
      <DatePicker
        timeFormat={false}
        isValidDate={disablePastDt}
      />

      <p className="title">Disable future dates:</p>
      <DatePicker
        timeFormat={false}
        isValidDate={disableFutureDt}
      />

      <p className="title">Disable weekends:</p>
      <DatePicker
        timeFormat={false}
        isValidDate={disableWeekends}
      />

      <p className="title">Disable the list of custom dates: <small>(2020-04-08, 2020-04-04, 2020-04-02)</small></p>
      <DatePicker
        timeFormat={false}
        isValidDate={disableCustomDt}
      />
    </div>
  );
}

export default App;

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