如何禁用reactjs中的将来日期？

Question

我没有使用任何日期选择器，但代码仍能正常工作。到目前为止，我已经选择了输入类型，并且一切正常。现在，我想禁用将来的日期。我怎么做？

<div className="form-group col-md-6">
                            <label for="inputDate4">Date of Birth</label>
                            <input type="date" className="form-control" id="inputDate4" placeholder="Date of Birth" name="dob" onChange={this.handleChange} />
                        </div>

编辑：以其他方式解决问题

我用了React Date Picker

它是如此容易实现。只需安装npm软件包

npm install react-datepicker --save

安装时刻aslo

npm install moment --save

导入库

import DatePicker from 'react-datepicker';
import moment from 'moment';
import 'react-datepicker/dist/react-datepicker.css';

在构造函数中

this.state = {
      dob: moment()
    };
    this.dateChange = this.dateChange.bind(this);

dateChange功能

dateChange(date) {
    this.setState({
      dob: date
    });
  }

最后是渲染功能

 <DatePicker
     selected={this.state.dob}
     onChange={this.dateChange}
     className="form-control"
    placeholder="Date of Birth"
    maxDate={new Date()}
    />

在这里，maxDate函数用于禁用将来的日期。

maxDate={new Date()}

资料来源：https : //www.npmjs.com/package/react-datepicker

谢谢！

Answer 1

您可以使用min，max属性将日期选择限制在日期范围内

<div className="form-group col-md-6">
     <label for="inputDate4">Date of Birth</label>
     <input type="date" className="form-control" id="inputDate4" placeholder="Date of Birth" name="dob" onChange={this.handleChange} max={moment().format("YYYY-MM-DD")}/>
</div>

Answer 2

maxDate 帮我完成了这项工作。尝试使用 minDate 来选择最小日期。

import moment from 'moment';
import DatePicker from 'react-datepicker';

<DatePicker maxDate={moment().toDate()} />