Question

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

<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

安装时刻

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()} />

Answer 3

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

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

Answer 4

您可以使用moment.js库来处理日期。现在，对于检查日期，您可以使用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)

因此，您必须逆转您的病情。如果要检查一切正常，可以在函数中添加一个额外的参数：

<div class="todo_content" style="width:66%">
  <input class="todo_add_input" autofocus="autofocus"
         placeholder="Please Add Task"  
         ng-model="addtask.activity_title" id="task-title">
</div>

注意：

如果这是不同的一天，但这不会有效，但差距不到24小时

Answer 5

我正在通过将选择的日期与当前日期进行比较，或者通过与moment（）进行比较来检查所选的日期，这将为我们提供从1970年某个日期开始经过的当前时间（秒）。它将不允许选择任何将来的日期。 / p>

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}/>

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

5 个答案: