在用日期 fns 格式格式化的反应日选择器输入上输入日期

Question

我无法使用onDayChange使用反应日选择器手动输入日期，但当我使用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')}
/>

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