how to disable future dates in material-ui datepicker in reactjs

Question

how to disable future dates in material-ui datepicker in reactjs?

I want to disable future dates that are after today's in material-ui in ReactJS. How can I disable future dates?

Answer 1

There is a property maxDate of DatePicker, that you can set to today's date, it will not allow to select the future dates.

maxDate = {new Date()}

Use it Like this:

<DatePicker
    onChange= {...}
    mode="landscape"
    value={...}
    floatingLabelText="Date"
    minDate={...}
    maxDate={new Date()}  //maxDate
/>

Note: You can specify the minimum date also, in minDate.

Check the DOC.

Answer 2

With the current material-ui and if you are using KeyboardDatePicker then, the following will work

import { KeyboardDatePicker } from '@material-ui/pickers';

<KeyboardDatePicker
  // other props
  disableFuture={true}
/>