Material-UI: How to disable previous dates in the datetime-local TextField

Question

My objective is to disable the past days and should not allow you to select, I've tried but didn't worked.

Here is the code:

<TextField
  variant="outlined"
  id="datetime-local"
  label="Select Date and Time"
  placeholder="Select Date and Time"
  type="datetime-local"
  value={this.state.DateTime}
  InputLabelProps={{
    shrink: true,
  }}
  onChange={this.HandleChange}
/>

Don't know where I'm going wrong. Can anyone help me in this query?

Answer 1

To disable the previous date, you can use the min attribute of input. Here is how you disallow dates before 2021-02-20T00:00:

<TextField
  type="datetime-local"
  inputProps={{
    min: "2021-02-20T00:00"
  }}
/>

To disable previous dates, you can instantiate a new Date object, which defaults to current date and pass it to the min attribute:

<TextField
  type="datetime-local"
  inputProps={{
    // only needs the first 16 characters in the date string
    min: new Date().toISOString().slice(0, 16),
  }}
/>

Live Demo