javascript - Material-UI：如何在 datetime-local TextField 中禁用以前的日期

Question

我的目标是禁用过去的日子，不应该让你选择，我试过但没有奏效。

这是代码：

<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}
/>

不知道我哪里错了。任何人都可以在这个查询中帮助我吗？

标签： javascriptreactjsmaterial-ui

Answer 1

要禁用上一个日期，您可以使用 的min属性input。以下是您如何禁止之前的日期2021-02-20T00:00：

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

要禁用以前的日期，您可以实例化一个新Date对象，该对象默认为当前日期并将其传递给min属性：

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

现场演示