How to Disable Past, Weekdays Dates in React Date Picker

In this tutorial, we will learn how to disable past, future and weekdays dates in a date picker calendar using React, React dates and function component.

React Dates is a popular package exclusively used for creating date picker components in React js single page applications.

It offers intuitive set of customizable and reusable components.

It speeds up the frontend development process in relation to dates and time related functionalities.

React Dates offers dynamic user experience for selecting dates.

We will use the react dates library to disable the past, future and weekends dates.

Here are some key features that comes along with React dates:

Date Picker: React Dates offers utterly handy date picker component that grants users to choose a single date or a range of dates.

Calendar: It contains a calendar component that shows the days of a month in a grid format.

Users can transverse between months and years using the built-in navigation buttons.

Date Range Picker: It helps you selecting a range of dates with its DateRangePicker component.

Localization: It supports localization and can be easily set up to show dates in various languages and date formats.

How to Disable Dates in React Date Range Picker

• Step 1: Build New React Project
• Step 2: Install React Dates Package
• Step 3: Formulate Function Component
• Step 4: Disable Dates in React Calendar
• Step 5: Add Component in Main Entry
• Step 6: Start Development Server

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, moment and react date-picker package using the given command.

npm i bootstrap moment

At the time of creating this tutorial, react-dates is not supporting React 18, there we are using –legacy-peer-deps tag.

npm i react-dates --legacy-peer-deps

We are now ready to integrate calendar component in React. On top of that we can 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 moment from "moment";
import DatePicker from "react-datetime";
import "react-datetime/css/react-datetime.css";
function UserProfile() {
  const pastDate = moment().subtract(1, "day");
  const disYesDate = (current) => {
    return current.isAfter(pastDate);
  };
  const weekDys = (current) => {
    return current.day() !== 0 && current.day() !== 6;
  };
  return (
    <>
      <h3 className="mb-3">Disable Past Dates</h3>
      <DatePicker timeFormat={false} isValidDate={disYesDate} />
      <h3 className="mb-3">Disable Weekends Date</h3>
      <DatePicker timeFormat={false} isValidDate={weekDys} />
    </>
  );
}
export default UserProfile;

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

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.

Implementing this feature in React Dates requires custom logic and configuration.

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

We showed you how to set up a react project from scratch, most importantly how to implement calendar picker in React using function component.