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

Question

I have not use any datepicker still code is working fine. I have selected input type to date and everything's working fine. Now I want to disable future dates. How do I do that?

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

Answer 1

You can use a min , max attribute to restrict the date selection within a date range

<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

The maxDate did the job for me. Try using minDate as well for minimum date selection.

 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
}

You need to try converting the input to a date object, after that you can make a new date object and check the input date object is older or not. Remember this will be big, because the users must input it in the right format. If not you will maybe get an exception or a wrong date object.

Answer 4

you can use moment.js library for working with date. now for check date is future you can use diff function of moment.js .

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

Therefore, you have to reverse your condition. If you want to check that all is fine, you can add an extra parameter to the function:

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

note:

this won't work if it's a different day but the difference is less than 24 hours

Answer 5

I am checking the date selected by comparing it with the current date or precisely with moment() which gives us the value of current time elapsed in seconds from some date in 1970. It will not allow to select any future dates.

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

Answer 6

使用此方法并在功能组件 ( https://i.stack.imgur.com/0Nyrj.jpg ) 上的 react js 中的输入字段中禁用过去日期

Answer 7

this works for me                       
 <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}                  
  />      
      check this -https://pnp.github.io/sp-dev-fx-controls-react/controls/DateTimePicker/