在使用 date-fns 格式化的 react-day-picker 输入上输入日期答案

【问题标题】：Inputing date on react-day-picker input formatted with date-fns在使用 date-fns 格式化的 react-day-picker 输入上输入日期
【发布时间】：2020-01-07 16:42:38
【问题描述】：

我无法使用 onDayChange 使用 react-day-picker 手动输入日期，但是当我使用 onChange 时可以。但是，我没有使用onChange 获得选定的值，而且我正在使用 date-fns 来格式化日期。

handleChangeDate(date, value) {
    this.setState({
      [value]: date,
    });
  }

  parseDate(str, format, locale) {
    const parsed = dateFnsParse(str, format, new Date(), { locale });

    if (dateFnsValid(parsed)) {
      return parsed;
    }

    return undefined;
  }

  formatDate(date, format, locale) {
    return dateFnsFormat(date, format, { locale });
  }

使用 onDayChange


<DayPickerInput
   placeholder="Date Engaged"
   value={dateEngaged}
   format="dd/MM/yyyy"
   formatDate={this.formatDate}
   parseDate={this.parseDate}
   onDayChange={value => this.handleChangeDate(value, 'dateEngaged')}
  />

使用 onChange

<DayPickerInput
   placeholder="Date Engaged"
   value={dateEngaged}
   format="dd/MM/yyyy"
   formatDate={this.formatDate}
   parseDate={this.parseDate}
   onChange={value => this.handleChangeDate(value, 'dateEngaged')}
  />

【问题讨论】：

标签： javascript reactjs react-day-picker date-fns

【解决方案1】：

这是他们的文档中关于如何使用 handleDayChange 的示例

handleDayChange(selectedDay, modifiers, dayPickerInput) {
 const input = dayPickerInput.getInput();
 this.setState({
   selectedDay,
   isEmpty: !input.value.trim(),
   isValidDay: typeof selectedDay !== 'undefined',
   isDisabled: modifiers.disabled === true,
 });
}

 <DayPickerInput onDayChange={handleDayChange}/>

【讨论】：