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"
        />

Checkout this page, the same question was answered here[comparing dates](https://stackoverflow.com/questions/492994/compare-two-dates-with-javascript) — Phillip Rekhotho, Jan 06 '21 at 07:53
Here is the solution - https://codesandbox.io/s/textfield-with-outline-color-forked-dnf9z?file=/demo.js:0-2512 — venkatesh pogartha, Jan 06 '21 at 07:57

score 2 · Accepted Answer · answered Jan 06 '21 at 07:55

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

score 1 · Answer 2 · answered Jan 06 '21 at 07:54

1

You can manage your validation in state. How to compare date is explained here

And how to show validation error in material-ui is explained here.

answered Jan 06 '21 at 07:54

Seyfullah Yamanoğlu

25
4

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

2 Answers2