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

Question

我不能使用 react-day-picker 手动输入日期，onDayChange但是当我使用onChange. 但是，我没有使用 an 获得所选值，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')}
  />

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