javascript - 如果没有值显示默认日期 - date-picker - ReactJs

Question

我正在react-datepicker用index.js:372 Uncaught RangeError: Invalid time value. 我知道错误可能来自那里，因为没有使用默认日期。所以我的问题是我该如何解决这个问题。这是我的代码示例：

this.state= {
            startDate: moment().startOf('day').subtract(20, 'days'),
            endDate: moment().startOf('day').add(1,'days'),
}

   handleStartDate = date => {

        this.setState({
            startDate: moment(date).startOf('day')
        }, () => {
            if (moment(date).startOf('day').isAfter(this.state.endDate)) {
                this.setState({
                    endDate: moment(date).startOf('day').add(1,'days')
                })
            }
        });
    }

    handleEndDate = date => {
        this.setState({
            endDate: moment(date).startOf('day').add(1,'days')
        });
    };

...
 return (
      <DatePicker
          id='startDate'
          dateFormat="dd/MM/yyyy"
          defaultValue = {this.startDate}
          selected={this.state.startDate.toDate()}
          onChange={this.handleStartDate}
       />

      <DatePicker
          id='endDate'
          dateFormat="dd/MM/yyyy"
          minDate={this.state.startDate.toDate()}
          selected={this.state.endDate.toDate()}
          onChange={this.handleEndDate}
       />

)

标签： javascriptreactjsreact-datepicker

Answer 1

它实际上不是默认值问题，您只需要检查argument从onChange方法传递的是否包含一些值。

handleStartDate = date => {
  // When you delete the input value "date" will return null
  // So if no values, just do nothing
  if (!date) return

  //...

}

同样适用handleEndDate

---

此外，如果您尝试做一些日期选择器范围，我猜您可能会发现@y0c/react-datepicker更有用。这是一个codeSandbox示例