如何禁用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

安装时刻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

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

你需要尝试输入转换为日期对象，在这之后你可以做一个新的Date对象，并检查输入日期对象是老年人或没有。请记住，这将是很大的，因为用户必须输入其在正确的格式。如果没有你，也许会得到一个异常或错误的日期对象。

Answer 3

您可以使用moment.js库与日期的工作。现在检查日期未来你可以使用diff moment.js的功能。

                   // today < future (31/01/2014)
today.diff(future) // today - future < 0
future.diff(today) // future - today > 0

因此，你必须扭转你的病情。如果要检查一切都很好，你可以添加一个额外的参数功能：

moment().diff(SpecialTo, 'days') // -8 (days)

注意：

如果它是一个不同的一天，但不同的是不超过24小时，这将不起作用

Answer 4

我检查这让我们从1970年某个日期将不允许选择任何将来的日期在几秒钟内经过当前的时间价值），通过它时刻与当前日期或比较精确（选定的日期。

handleDateChange(date){
                    if(date <= moment()){
                    this.setState({
                        testDate: date
                      });
                }
            }
<DatePicker className="form-control" dateFormat="DD/MM/YYYY" id="testDate onChange={this.handleDateChange.bind(this)} onSelect={this.handleSelect}                                                                selected={this.state.testDate}/>