How to Disable Past, Future, Weekdays Dates in React 18 Date Picker

Last Updated on by in React JS

In web applications, the date-picker component plays a pivotal role. It serves as an intuitive tool, enabling site users to interact effortlessly with dates and letting them select dates, and time to create events and schedules.

Selecting the correct date and time from the calendar component is crucial. As a developer, it’s your responsibility to make them select only the correct dates, valid data selection prevents users from adding wrong data to server.

In this tutorial, we will learn how to disable past dates, future dates, and weekdays in a date picker or calendar component using React, functional component, react-datetime, and moment plugins.

By implementing this feature, we can restrict users from selecting past dates, future dates, and even weekdays according to our desired logic. This can be particularly useful in scenarios where we want to limit date choices to a specific range or only allow selections on certain days.

How to Disable Dates in React Calendar Date Picker Component

The react-datetime, moment packages makes date and time handling quite easy, by leveraging the power of react-datetime library we can handle date and time in React effortlessly, and prevent users from wrong date selection.

By the end of this tutorial, you will have a comprehensive understanding of how to effectively disable past, future, and weekdays dates in a date picker calendar.

Build New React Project

Open the code editor, also open the command-prompt.

If you have installed Node and Npm then run the given command to install a new app.

npx create-react-app my-react-app

As soon as you created the project, just enter into the project directory.

cd my-react-app

Install React Dates Package

We will install bootstrap, react-datetime, moment and react date-picker package using the given command.

npm i react-datetime moment bootstrap --legacy-peer-deps

We are now ready to integrate calendar component in React, and disable dates in calendar components.

Formulate Function Component

Next, head over to src/ folder, create components/ folder. Also, you have to create components/UserProfile.js file.

import React from 'react'

function UserProfile() {
  return (
    <div></div>
  )
}

export default UserProfile

Disable Dates in React Calendar

Here’s an example of how you can use React Dates in function component and easily disable the past, future and weekdays dates.

Add the following code into the components/UserProfile.js file.

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

export default function UserProfile() {
  // disable past dates
  const yesterday = moment().subtract(1, "day");
  const disPastDate = (current) => {
    return current.isAfter(yesterday);
  };

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

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

  return (
    <div>
      <h2 className="mb-3">React Disable, Future, Weekend Dates in Example</h2>

      <div className="mb-4">
        <p className="mb-2">
          <strong>Disable Past Dates:</strong>
        </p>
        <DatePicker timeFormat={false} isValidDate={disPastDate} />
      </div>

      <div className="mb-4">
        <p className="mb-1">
          <strong>Disable Future Dates:</strong>
        </p>
        <DatePicker timeFormat={false} isValidDate={disFutureDate} />
      </div>

      <div className="mb-4">
        <p className="title">
          <strong>Disable Weekends:</strong>
        </p>
        <DatePicker timeFormat={false} isValidDate={disWeekends} />
      </div>
    </div>
  );
}

Add Component in Main Entry

Move on to the App.js file, here you have to import the Dashboard component.

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import UserProfile from "./components/UserProfile";

function App() {
  return (
    <div className="container mt-3">
      <h2 className="mb-3">React Disable Past and Future Dates Example</h2>
      <UserProfile />
    </div>
  );
}

export default App;

Start Development Server

Make sure to start the react development server; after you invoked the command the UserProfile component will be served on the browser.

npm start

You can use the given url to view the application.

http://localhost:3000

How to Disable Past, Weekdays Dates in React Date Picker

Summary

Disabling past dates and weekdays in a React Date component may drastically uplift the user experience and enhance the functionality of date selection.

By revoking the selection to future dates and excluding weekdays, you can make sure that users must select a valid and relevant dates as per the requirement.

In this tutorial, we have learned how to implement calendar picker in React, and how to disable dates in React calendar component using react dates and moment libraries.