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?

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?

• javascript
• reactjs
• material-ui

1 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