React-datepicker: Fire native "onchange" event with date selection

[LeoAref]

Firstly, thanks for such a spectacular component, it's really useful

Secondly, most of the time we need firing the native events such as onchange for the form validations for instance, currently I'm doing something sounds a hack to achieve that:

ref.refs.input.refs.input.onchange();

I hope we will have it properly supported from the component very soon!

[alex-shamshurin]

You can do it in onChange, don't you?

[andrius444]

I think you are looking for onChangeRaw()

[LeoAref]

@alex-shamshurin @andrius444 Thanks for your comments, I'll try it out and see if that's what I'm looking for.

[LeoAref]

I found that onChangeRaw is getting called if the user changed the date text manually without picking it from the calendar.

But what I'm looking for here is firing the native onchange method after changing the date value, so that the form validation is getting fired automatically, I hope it's clearer now

[jbschrades]

@LeoAref Any luck with this? I'm trying to to trigger a redux-form form onChange event when a date is selected. If I type in the input field, the event is triggered, but not when I select a date. This doesn't work:

<DatePicker
        {..this.props.input}
        ...
        onChange={(date) => this.props.input.onChange(date)}
        ...
    />

[alex-shamshurin]

@jbschrades If you use custom input, usually it's dependent upon its own state, you should call input.onChange(inputString|event). When you select date via widget you should update input's state too.

I guess you have bound the input string value to redux-form state. Instead you should use react-datepicker selected date (of type moment) in your redux-form state with format and parse options to convert moment type to string type(for readability). And when input string (maybe internal input component this.state or mobx) changes or new date selected via datepicker use input.onChange(value|event)

[aij]

@jbschrades For use with redux-form, we're using this in a wrapper component

  handleChange = (date, event) => {
    if (event && event.type === 'change') {
      return this.props.onChange(event.target.value);
    }
    const strDate = date && date.isValid() ? date.format(validFormats[0]) : '';
    this.props.onChange(strDate);
  }

then rendering with

        <DatePicker
          selected={fromString(this.props.value)}
          onChange={this.handleChange}
          onChangeRaw={this.props.onChange}

Part of that is to always store a string in the form value, but also to always pass a local moment object into react-datepicker. (Because the handling of mixed timezones is still rather awkward.)

[nbkhope]

I had the same issue. What I did was just reset my validation in the onChange() (because there should be no errors if you select the date using the UI widget) while I kept my validation in the onChangeRaw().

[sartul]

Not sure if its too late to comment. I faced same issue and what helped me is onChange event which has date and event args. With event's type and target properties you can easily find out what was last action and value. These properties will give you more control in finding and setting your state. I got this clue form https://github.com/Hacker0x01/react-datepicker/issues/1310.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.