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

)

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

也是如此

此外，如果您尝试执行某些日期选择器 Range （日期选择器），我想您可能会发现@y0c/react-datepicker更有用。这是一个codeSandbox示例

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

1 个答案: