The onChange event only seems to fire when selecting a date from the picker or changing the date manually but not when the user changes the input Time. This makes it impossible to do any sort of validation on user input.
The current workaround is to set readOnly to true so that it forces users to only use the picker, but it would be ideal to also let them type into the box.
how can I detect the time manually changes?
"react-datepicker": "^0.60.2",
"react": "^15.6.1",
I have same problem. As temporal fix you can provide onSelect property that
duplicate of onChange.
if (!isSameDay(this.props.selected, changedDate) || this.props.allowSameDay) {
if (changedDate !== null) {
if (this.props.selected) {
changedDate = setTime(newDate(changedDate), {
hour: getHour(this.props.selected),
minute: getMinute(this.props.selected),
second: getSecond(this.props.selected)
}) // <------- bug, i need to receive time from new date instead of old selected date
}
this.setState({
preSelection: changedDate
})
}
this.props.onChange(changedDate, event) // <--------- fires only if day changed
}
this.props.onSelect(changedDate, event) // <--------- fires always
A workaround is to parse the value with onChangeRaw and call onChange manually.
<DatePicker dateFormat="YYYY-MM-DD HH:mm"
onChange="this.handleInputChange"
onChangeRaw="this.handleInputChangeRaw" />
handleInputChangeRaw = e => {
const date = moment( e.target.value, "YYYY-MM-DD HH:mm" );
if( date.isValid() ) {
this.handleInputChange( date );
}
}
<DatePicker dateFormat="YYYY-MM-DD HH:mm" onChange={(e) => this.handleInputChange(e)}
onChangeRaw={(e) => this.handleInputChangeRaw(e)} />
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.
The issue still hasn't been resolved :-\
Can we not get this fixed? This is a core piece of functionality. I'm surprised it was overlooked. It's been 2 years and no progress. Seriously?
Yes this issue is still present on Android phones why can't this be fixed?
This issue is a blocker. Cannot use a component that breaks basic, standard browser behavior.
Most helpful comment
The issue still hasn't been resolved :-\