javascript - How to check date should be less than present date in Reactjs?

Question

i am using material ui in my project. want to as how to check date should be less than the presennt date. for example, if today is 6th jan 2021,and user set 5th or 6th jan than its fine, but if he / she set 7th jan 2021 then it should throw error.

codesandbox: https://codesandbox.io/s/textfield-with-outline-color-forked-8oj2z

        <TextField
          id="outlined-email-input"
          className={classes.textField}
          type="number"
          defaultValue="0"
          type="date"
          name="email"
          autoComplete="email"
          margin="normal"
          variant="outlined"
        />

Answer 1

Try this

import React from "react";
import PropTypes from "prop-types";
import classNames from "classnames";
import { withStyles } from "@material-ui/core/styles";
import MenuItem from "@material-ui/core/MenuItem";
import TextField from "@material-ui/core/TextField";

const styles = (theme) => ({
  container: {
    display: "flex",
    flexWrap: "wrap"
  },
  textField: {
    marginLeft: theme.spacing.unit,
    marginRight: theme.spacing.unit
  },
  dense: {
    marginTop: 16
  },
  menu: {
    width: 200
  },
  /* STYLES FOR THE OUTLINE BORDER */
  specialOutline: {
    borderColor: "pink",
    borderWidth: 4
  }
});

const currencies = [
  {
    value: "USD",
    label: "$"
  },
  {
    value: "EUR",
    label: "€"
  },
  {
    value: "BTC",
    label: "?"
  },
  {
    value: "JPY",
    label: "￥"
  }
];

class OutlinedTextFields extends React.Component {
  state = {
    name: "Cat in the Hat",
    age: "",
    multiline: "Controlled",
    currency: "EUR"
  };

  handleChange = (name) => (event) => {
    this.setState({
      [name]: event.target.value,
      dateError: null
    });
  };

  handleDateChange = (e, value) => {
    const selected = new Date(e.target.value);
    const maxDate = new Date();
    maxDate.setHours(0, 0, 0, 0);
    maxDate.setDate(maxDate.getDate() + 1);
    console.log(maxDate);
    if (selected < maxDate) {
      this.setState({ dateError: null });
    } else {
      this.setState({ dateError: { helperText: "Invalid", error: true } });
    }
  };

  render() {
    const { classes } = this.props;

    return (
      <form className={classes.container} noValidate autoComplete="off">
        <TextField
          id="outlined-email-input"
          // label="Email"
          className={classes.textField}
          defaultValue="0"
          type="date"
          name="email"
          autoComplete="email"
          margin="normal"
          onChange={this.handleDateChange}
          variant="outlined"
          {...{ ...(this.state.dateError ? this.state.dateError : {}) }}
        />
        {/* <TextField
          id="outlined-password-input"
          label="Password"
          className={classes.textField}
          type="number"
          defaultValue="0"
          name="password"
          autoComplete="current-password"
          margin="normal"
          variant="outlined"
        /> */}
      </form>
    );
  }
}

OutlinedTextFields.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(styles)(OutlinedTextFields);

Here is the sandbox link for info https://codesandbox.io/s/textfield-with-outline-color-forked-dnf9z?file=/demo.js:0-2512