如何在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>

编辑：通过其他方式解决问题

我用过日期选择器

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

npm install react-datepicker --save

同时安装力矩传感器

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

var input = new Date ("inputgotBackfromthe user")    
var now = new Date();
if (before < now) {
  // selected date is in the past
}

您需要尝试将输入转换为日期对象，然后可以创建一个新的日期对象，并检查输入日期对象是否较旧。请记住，这将是巨大的，因为用户必须以正确的格式输入。否则，您可能会得到一个异常或错误的日期对象。

Answer 2

maxDate帮我完成了任务。尝试使用minDate进行最短日期选择。

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

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

Answer 3

您可以使用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>