如果没有值显示默认日期 - 日期选择器 - 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}
       />

)

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

也是如此

此外，如果您正在尝试做一些日期选择器 Range 我猜您可能会找到 @y0c/react-datepicker more useful. Here is an codeSandbox 示例

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

If there is no value display default date - date-picker - ReactJs

javascript

reactjs

react-datepicker