React-datepicker: onChangeRaw event not working

[pratikt-cuelogic]

Expected behavior

should be able to use onChangeRaw to get event object

Actual behavior

onChangeRaw doesn't trigger at all (tried passing IIFE, it triggers but it will not return event object)

Steps to reproduce

use this example:
https://reactdatepicker.com/#example-44
handleChangeRaw(value) { if(value === "tomorrow") { const tomorrow = moment().add(1, "day") this.handleChange(tomorrow) } } <DatePicker selected={this.state.startDate} onChange={this.handleChange} placeholderText="Enter tomorrow" onChangeRaw={(event) => this.handleChangeRaw(event.target.value)} />

[victor-samson]

Was struggling with this and have realised I was running an old version 0.37.0. 🤦‍♂️

[goldfarbdev]

I can't get this to work even with new version 2.2.0

[jordantrainor]

Will this be fixed?

[johnmccollum]

So this was a cause of confusion to me: onChangeRaw doesn't fire if you select a value from the datepicker, it _only_ fires when you type something into the text input itself.

(For example, "tomorrow", in the example in the docs.)

[wheezymustafa]

Was anyone able to find a fix for this? I'm still experiencing this issue on v2.7.0

[doublejosh]

This event is very necessary, because there's no other way to get an id attribute to use a generic handler function to update the state and backend data storage.

[jslucas]

+1 onChangeRaw is never fired.

Looking at the example here:
https://reactdatepicker.com/#example-get-raw-input-value-on-change

They're passing both onChange and onChangeRaw, if you take out onChange the example doesn't work at all because onChangeRaw never fires....

Can we get some insight into this?

[doublejosh]

Same same, I needed the event object for "saving" style, but couldn't access it. This certainly should get a fix, but here's what I had to do...

import DatePicker from 'react-datepicker'
import 'react-datepicker/dist/react-datepicker.css'

export default (props) => {
  const [value, setValue] = useState(props.value)
  const [saving, setSaving] = useState(false)
  let wrapperStyle = 'input-animation'

  const handleChange = (e) => {
    let val = e.target.value
    setSaving(true)
    if (typeof value === 'number') {
      val = Number(e.target.value, 10)
    }
    setValue(val)
  }

  if (saving) {
    wrapperStyle += ' input-animation--saved'
  }

  return (
    <div className={wrapperStyle}>
      <label htmlFor={props.id}>{props.label}</label>
      <DatePicker
        id={props.id}
        selected={Date.parse(value)}
        onChange={date => setValue(date)}
        onBlur={event => handleChange(event)}
      />
    </div>
  )
}

[jslucas]

@doublejosh I ended up synthesizing an event as well.

[oisindev]

+1 This is an issue as I need access to the event param

[thesnowgoose]

For me its working on 2.11.0

[ptahchiev]

Yep, same here. 3.0.0 and still not working.