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

admin管理员组

文章数量:1415100

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

Share Improve this question Follow edited Apr 10, 2021 at 8:37 NearHuscarl 82.2k2424 gold badges320320 silver badges282282 bronze badges asked Apr 10, 2021 at 8:17 SanjanaSanjana 29622 gold badges88 silver badges2121 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

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

本文标签： javascriptMaterialUI How to disable previous dates in the datetimelocal TextFieldStack Overflow