Material ui Textfield type date, min not working

Question

I am trying to add a min date from where the pick can start but the min date is not working.

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

Does anyone have any idea what the issue is?

Answer 1

This should do the trick

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

Answer 2

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);

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.