reactjs - 材料 ui 文本字段类型日期，最小值不起作用

Question

我正在尝试添加一个可以开始选择的最小日期，但该最小日期不起作用。

<TextField
    id="date"
    type="date"
    defaultValue="2017-05-24"
    minDate="24/01/2019"
    InputLabelProps={{
      shrink: true
    }}
  />

有没有人有任何想法？

Answer 1

这应该可以解决问题

<TextField
  InputProps={{inputProps: { min: "2020-05-01", max: "2020-05-04"} }}
  type="date"
  defaultValue="2019-05-24"
/>

Answer 2

如果您只是想利用 HTML日期属性，您可以指定min并max使用inputProps：

import React from "react";
import ReactDOM from "react-dom";

import TextField from "@material-ui/core/TextField";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles({
  input: {
    "&:valid": {
      backgroundColor: "yellow"
    },
    "&:invalid": {
      backgroundColor: "red"
    }
  }
});

function App() {
  const classes = useStyles();
  return (
    <div>
      <TextField
        InputProps={{ classes: classes }}
        type="date"
        defaultValue="2019-05-24"
        inputProps={{ min: "2019-01-24", max: "2020-05-31" }}
      />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

您可以在此处找到有关约束验证 API 的更多信息。

如果您正在寻找功能更全面的日期选择器，那么TextField. 相反，您应该查看Material UI Pickers。

Answer 3

Try like this as inputProps.

                    inputProps={{
                      max: "2020-01-01",
                      min: "1993-01-01"
                    }}