Solution
To disable future date in datepicker in React, you can use the max
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 future date using max
attribute.
<input
type="date"
onChange={(e) => setDate(e.target.value)}
max={"2022-12-21"}
value={date}
/>
Example
In this example, we will write a react js code to disable future date in input type date.
Let’s list down what we are going to do below example.
- Create input type date
- Use
max
attribute to disable future date - format date using moment so
max
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)}
max={moment(new Date()).format("YYYY-MM-DD")}
value={date}
/>
</div>
);
}
Output