Question

实际上，在反应中，我试图添加日期选择器验证，如果我们在“开始日期”字段中选择了今天的日期，那么它将阻止结束日期字段中该日期之前的日期，则用户只能选择该日期之后的日期

Answer 1

您可以在格式为input的普通HTML YYYY-MM-DD标记中传递min和max。这是日期的最小值和最大值。

要格式化日期，可以使用date-fns库。

示例：

import React from "react";
import ReactDOM from "react-dom";
import { format } from "date-fns";

import "./styles.css";

class App extends React.Component {
  state = {
    sDate: "",
    endD: ""
  };
  render() {
    const { sDate } = this.state;
    return (
      <div className="App">
        <label htmlFor="sDate">Start Date</label>
        <input
          type="date"
          onChange={e => this.setState({ sDate: e.target.value })}
        />
        <label htmlFor="sDate">End Date:</label>
        <input
          type="date"
          min={format(sDate, "YYYY-MM-DD")}
          onChange={e => this.setState({ sDate: e.target.value })}
        />
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

演示链接：https://codesandbox.io/s/j35m9p0p65

检查沙盒，然后选择开始日期即可查看所有以前的日期。

ReactJS，Datepicker验证开始日期和结束日期

1 个答案: