javascript - 如果没有值显示默认日期 - 日期选择器 - ReactJs

Question

我正在使用 react-datepicker 找到出路，一切都运行顺利，直到我删除提交的输入日期，它会抛出一个错误: index.js:372 Uncaught RangeError:时间值无效。我明白错误可能来自那里，因为没有使用默认日期。所以我的问题是我该如何解决这个问题。这是我的代码示例:

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

)

Answer 1

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

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