CODEWITHSUNDEEP
react-day-picker
Tim
Tim

Reputation: 21

react-day-picker DayPickerInput not firing onDayChange event

We are upgrading from version 5.5.3 of react-day-picker to the latest version (7.1.10). I have looked at the documentation for breaking changes and modified our code accordingly. I have even changed our code to look like the code in the documentation but I cannot get the onDayChange event to fire when selecting a date from the calendar.

The handleDayChange function never fires. I have no idea why not. What am I missing?

import React from 'react'
import DayPickerInput from 'react-day-picker/DayPickerInput'
import './input-with-calendar.scss'

const dateFormat = 'MM/DD/YYYY'

export default class InputWithCalendar extends React.Component {
  constructor(props) {
    super(props)
    this.handleDayChange = this.handleDayChange.bind(this)
    this.state = { selectedDay: undefined }
  }

  handleDayChange(day) {
    console.log('In handleDayChange')
    this.setState({ selectedDay: day })
  }

  render() {
    const { selectedDay } = this.state
    return (
      <div className='input-with-calendar'>
        <div className='overlay-date-picker-container'>
          {selectedDay && <p>Day: {selectedDay.toLocaleDateString()}</p>}
          {!selectedDay && <p>Choose a day</p>}
          <DayPickerInput onDayChange={this.handleDayChange} />
        </div>
      </div>
    )
  }
}

This is the 5.5.3 code...this works

import React from 'react'
import DayPickerInput from 'react-day-picker/DayPickerInput'
import './input-with-calendar.scss'
import moment from 'moment'

const dateFormat = 'MM/DD/YYYY'

const formatDate = (date) => {
  return date && moment(date).format(dateFormat)
}

class InputWithCalendar extends React.Component {
  componentWillMount () {
    this.props.onDateChange(this.props.selectedDate)
  }

  render () {
    return (
      <div className='input-with-calendar'>
        <div className='input-with-calendar-filter-label'>Date</div>
        <div className='overlay-date-picker-container'>
          <DayPickerInput
            readOnly
            value={formatDate(this.props.selectedDate)} // value is expected to be a string
            placeholder={dateFormat}
            onDayChange={(dateAsMoment) => this.props.onDateChange(dateAsMoment && dateAsMoment.toDate())}
            dayPickerProps={{
              weekdaysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
              disabledDays: { before: new Date() }
            }}
          />
        </div>
      </div>
    )
  }
}

export default InputWithCalendar

Upvotes: 2

Views: 2104

Answers (1)

gpbl
gpbl

Reputation: 4804

I believe you are missing the value prop:

<DayPickerInput 
   value={this.state.selectedDay} 
   onDayChange={this.handleDayChange} 
/>

See http://react-day-picker.js.org/examples/input-state

Upvotes: 2

Related Questions