如何在 reactjs 中禁用未来日期？答案

【问题标题】：How do I disable future dates in reactjs?如何在 reactjs 中禁用未来日期？
【发布时间】：2018-09-25 19:34:45
【问题描述】：

我没有使用任何日期选择器，但代码工作正常。我已经选择了迄今为止的输入类型，一切正常。现在我想禁用未来的日期。我该怎么做？

<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 日期选择器

它很容易实现。只需安装 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

谢谢！

【问题讨论】：

Set date input field's max date to today的可能重复

标签： reactjs datepicker

【解决方案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>

【讨论】：

完美！这很简单。非常感谢。
很高兴能帮上忙
不幸的是，这对我不起作用。如果我想使用当前日期作为最小当前日期的开始日期，那么我应该使用 min 代替 max ？

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

谢谢，它正在工作。我还找到了另一种方法，我没有使用简单的输入字段，而是使用了 react-datepicker

【解决方案4】：

您可以使用moment.js 库来处理日期。现在检查日期是未来你可以使用moment.js的diff函数。

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

因此，你必须扭转你的状况。如果你想检查一切是否正常，你可以在函数中添加一个额外的参数：

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

注意：

如果是不同的一天但相差不到 24 小时，这将不起作用

【讨论】：

【解决方案5】：

我通过将所选日期与当前日期或与 moment() 进行比较来检查所选日期，它为我们提供了从 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}/>

【讨论】：

【解决方案6】：

<DateTimePicker 
   dateConvention={DateConvention.Date}
   showGoToToday={true}

    onChange={date => this.handleDateChange(date)} 
    placeholder={"Enter Date"}
    showLabels={false} 
    value={this.state.startDate} 
    maxDate={this.props.todaydate}//or use new date()
    //formatDate={this._onFormatDate}                  
 />

检查这个 - https://pnp.github.io/sp-dev-fx-controls-react/controls/DateTimePicker/

【讨论】：