如何检查日期应该小于 Reactjs 中的当前日期？

Question

我在我的项目中使用材质 ui。想如何检查日期应该小于当前日期。例如，如果今天是 2021 年 1 月 6 日，并且用户设置 5th 或 6th jan 比正常，但如果他/她设置 7th jan 2021 那么它应该抛出错误。

代码沙盒：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

试试这个

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

这是获取信息的沙盒链接 https://codesandbox.io/s/textfield-with-outline-color-forked-dnf9z?file=/demo.js:0-2512

Answer 2

您可以在状态下管理您的验证。如何比较日期解释here

以及如何在material-ui中显示验证错误的解释here。