How to disable past dates in material-ui Date picker?

Admin 1
Viewed 22057

I'm using material-ui Date-Picker. How to disable past days before today's date?

 import React from 'react';
 import DatePicker from 'material-ui/DatePicker';

function disablePastDays(date) {
  //code here to disable past days
}

const calendar = () => (
    <div>
        <DatePicker shouldDisableDate={disablePastDays}/>
    </div>
)
material-ui
4 Answers

Use disablePast.

<DatePicker
    disablePast
/>

They have it since v1.0.0-beta.10.

user_15167720

We can give minDate as props to the DatePicker material UI component

Create a state using usestate and then pass the state value into the props as below

const [startMinDate, setStartDate] = useState(new Date())

<DatePicker
      required
      label="Date"
      disablePast                  
      minDate = {startMinDate}
 />
user_128458630

I am using import DatePicker from '@mui/lab/DatePicker'; library of version "@mui/lab": "^5.0.0-alpha.66"

Below code works fine for me

 <DatePicker
   disablePast
   value={checkout.rideDate}
   onChange={(newValue) => { // your code of onChange functionality}
    />
   }
 />
user_130716620
Related