Inputing date on react-day-picker input formatted with date-fns

Question

I can't type the date manually with react-day-picker using onDayChange but I can when I use an onChange. However, I do not get the selected value with an onChange and also I am using date-fns to format the date.

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 });
  }

Using onDayChange


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

Using onChange

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

score 0 · Answer 1 · answered Sep 07 '19 at 05:16

This is the example from their docs on how to use 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}/>

Inputing date on react-day-picker input formatted with date-fns

1 Answers1