Create custom component input for react-day-picker

Question

I was creating a custom materiel UI component for DayPickerInput, but the problem is when onDayChange is fired,it gives an error.

handleToDateChange = (selectedDay, modifiers, dayPickerInput) => {
    const val = dayPickerInput.getInput().value;
}

Uncaught TypeError: Cannot read property 'value' of null

DayPickerInput Component

 <DayPickerInput
      component={props => <DatePickerCustomInput {...props} />}
      value={toDate}
      placeholder=""
      formatDate={this.setDatePickerformatDate}
      onDayChange={this.handleToDateChange}
  />

DayPickerInput Custom Component

class DatePickerCustomInput extends Component {
   render() {
       return (
           <TextField {...this.props}
               InputProps={{
                   startAdornment: (
                       <InputAdornment position="start">
                           <DateRange />
                       </InputAdornment>
                   ),
               }}

               value={this.props.value}
           />
       );
   }
}

to reproduce the issue : https://codesandbox.io/s/387r9plx65

score 0 · Answer 1 · answered Sep 11 '18 at 12:19

0

Try do this!

handleToDateChange = (selectedDay, modifiers, dayPickerInput) => {
    const val = dayPickerInput.state.value;
}

answered Sep 11 '18 at 12:19

seunggabi

1,699
12
12

so is this the best practice to get a child state by calling component.state in react ? – wahdan Sep 11 '18 at 12:22

kgstew · Answer 2 · 2019-12-09T18:37:10.690

0

From the docs here. The onDayChange method has a signature of

onDayChange (day: date, modifiers: Object, e: SyntheticEvent) ⇒ void

day is a date object referring to the selected date in the picker. You don't need to pull the value out of the event to get the selected date.

edited Dec 09 '19 at 18:37

answered Dec 09 '19 at 18:10

kgstew

472
4
12

Create custom component input for react-day-picker

2 Answers2