React Datepicker Disable Past Dates
Learn how to disable past dates, previous dates, and weekdays in React date picker components using React Datepicker, React Datetime. Find out how to use minDate and excludeDates props to control the date selection range and validity

written

reviewed

updated

Thanks for your feedback!
Your contributions will help us to improve service.
How to Disable Previous Date in Datepicker using React Js?
React Js Disable past dates in datepicker:To disable past dates in a datepicker using React.js, you can achieve this by setting the min
attribute of the input element to today's date using JavaScript's Date
object. This ensures that the user cannot select a date earlier than the current date.
React Input Type Date Disable Past Dates
Copied to Clipboard
xxxxxxxxxx
<script type="text/babel">
const { useState } = React;
function App() {
const [selectedDate, setSelectedDate] = useState(null);
const minDate = () => {
const today = new Date().toISOString().split('T')[0];
return today;
};
return (
<div className='container'>
<h3>React Js Disable past dates in datepicker</h3>
<input
type="date"
value={selectedDate}
min={minDate()}
onChange={(e) => setSelectedDate(e.target.value)}
/>
</div>
);
}
ReactDOM.render(<App />, document.getElementById('app'));
</script>
Output of React Calendar Disable Past Dates
Ad