score:-1

Try like this as inputProps.

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

score:3

If you are just trying to leverage the HTML date attributes, you can specify the min and max using 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);

Edit TextField type date

You can find more about the constraint validation API here.

If you are looking for a more full-featured date picker, that functionality is not provided by TextField. Instead, you should check out Material UI Pickers.

score:13

This should do the trick

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

Related Query

More Query from same tag