Solution

To disable previous date in input type date in React, you can use the min attribute you have to just pass your date in YYYY-MM-DD.

Note: Your date should formated like this YYYY-MM-DD.

To format a date you can read my below article, here I have explained multiple ways to format a date.

https://reactjssnippet.com/posts/how-to-display-date-in-react-js/

Snippet

In this snippet, we will see short example to disable previous date using min attribute.

<input
  type="date"
  onChange={(e) => setDate(e.target.value)}
  min={"2022-12-21"}
  value={date}
/>

Example

In this example, we will write a react js code to disable previous date in input type date.

Let’s list down what we are going to do below example.

  • Create input type date
  • Use min attribute to disable past date
  • format date using moment so min can understand
import React, { useState } from "react";
import moment from "moment";

export default function App() {
  const [date, setDate] = useState(new Date());

  return (
    <div className="App">
      <input
        type="date"
        onChange={(e) => setDate(e.target.value)}
        min={moment(new Date()).format("YYYY-MM-DD")}
        value={date}
      />
    </div>
  );
}

Output

disable, date

codesandbox