React-datepicker: does'n change inputValue (check in calendar) after onChangeRaw event

[Greyewi]

Expected behavior

Actual behavior

does'n change inputValue (when check in calendar) after onChangeRaw event

Steps to reprodcue

Do onChangeRaw event, and choose other date.

I have next props
<DatePicker selected={selected ? moment(selected, 'DD.MM.YYYY HH:mm') : defaultDate ? defaultDate : moment()} onChange={this.handleOnChange} customInput={<CustomInput />} showTimeSelect locale="ru" timeFormat="HH:mm" dateFormat={dateFormat} minDate={moment(minDate, 'DD.MM.YYYY HH:mm')} onChangeRaw={(event) => { this.handleChangeRaw(event.target.value) }} />
and

`class CustomInput extends React.Component {
static propTypes = {
onClick: React.PropTypes.func,
onChange: React.PropTypes.func,
value: React.PropTypes.string
}

render () {
    return (
        <input
            className="example-custom-input"
            onClick={this.props.onClick}
            value={this.props.value}
            onChange={this.props.onChange}

        />
    )
}

}`

[tcollins]

I am seeing a similar thing. After editing the input directly, which triggers the onChangeRaw method. If I click on a day in the calendar, it works and actually gets everything working correctly again, but if I click on a different time, my state is updated, but the value displayed in the input is not updated and there is a disconnect between the state value vs the input value.

[nick-vanvynckt]

I'm having a similar problem with the state value not being in sync with the input value. I have a dropdown box next to my date range where you can choose from a couple presets. Once the user manually changes the input fields, the datepicker input value will no longer update to the correct value (although I can see the datepicker working correctly and selecting the correct date in the pop-up).

[dahliacreative]

I dunno if anyone needs this but I ran into the same issue, I was updated the selected day via a button, (have previous and next buttons which update state to add / subtract one day) and when you open the pop up the correct day was selected but the input still showed the old date.

So here is my solution, it's reeeeeeeeally dirty but it works:
I add a ref to the picker then inside my functions where I update the state to the new date I do this

this.picker.setFocus()
this.picker.setOpen(false)
this.picker.refs.input.refs.input.blur()

Hope this can help someone else out, I've spent 3 hours trying to get a solution.

[eyanez1230]

@dahliacreative Can you please post a code snip? It is not working for me. Thanks!

[karlkras]

@dahliacreative Yes, please share. I'm pulling what little hair I have out trying to "fix" this behavior.

[dahliacreative]

Sorry I've been on holiday!

Right since I came up with method I figured out that the issue is if you add/subtract from the date then it won't update, e.g:

nextDay = () => {
  this.setState({
    date: this.state.date.add(1,'d')
  })
}

The key is to use moment's clone method, then it will update properly:

nextDay = () => {
  this.setState({
    date: this.state.date.clone().add(1,'d')
  })
}

Hope this helps, let me know if it does!

[karlkras]

Hey Simon, thanks for the feedback.

Hmm, I guess we probably aren't talking apples to apples on this. Here's an example of the problem I'm having... the component:

import React, { Component } from 'react';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
import moment from 'moment';

class DateExamplePicker extends Component {
  constructor (props) {
    super(props)

    this.state = {
      startDate: this.initialDate()
    };
  }

  initialDate = () => (
      moment().add(2, 'M')
  );

  handleChange = (date) => {
    this.setState({
      startDate: date || this.initialDate()
    });
  }

  render() {
    return <DatePicker
        selected={this.state.startDate}
        onChange={this.handleChange}
        format={'L'}
    />;
  }
}

export default DateExamplePicker;

so if you delete everything in the text field, the value in the onChange handler is reported back as null.
When I detect this, I try and set the selected value back to initial date. You will see that the date does wind up properly reset in the calendar, but isn't rendered into the text field.

[dahliacreative]

@karlkras your add params are the wrong way around should be .add(2, 'M')

[karlkras]

@dahliacreative Oops, you are correct (fixed my example), but the original issue remains. Won't update the text input when I force the selected back to the default date.

[dahliacreative]

@karlkras ok I have some time today I'll take a look and see if I can figure it out. Might be a hacky solution though. What version of the datepicker are you using?

[dahliacreative]

I'm using an older version seems some of the refs have been removed on the new version.
My suggestion would be to validate the input value on blur.

Not sure what else you can do, definitely seems like a bug though

[karlkras]

Yeah, I've tried using both the onblur and onkeydown events to see if I couldn't simply set the value on the input, but that didn't seem to work (frankly I don't know why, I assume this datepicker bug is getting in the way). I'll post the code showing this attempt later.
I've been avoiding digging into this code myself (reason why I choose to use this was to save time rolling myself), but looks like I may not have a choice if I want this fixed.

[dahliacreative]

Yeah, our product already had it so I didn't want to look for another one to use. You might want to give this one a go: http://react-day-picker.js.org/

[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.