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

Question

我正在尝试从开始选择的位置添加一个最小日期，但是最小日期无效。

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

有人有什么想法吗？

Answer 1

如果您只是尝试利用HTML date attributes，则可以使用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 here的更多信息。

Answer 2

尝试像这样作为inputProps。

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