Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

DatepickerIOS onDateChange reports the wrong date #8169

Closed
willmcneilly opened this issue Jun 16, 2016 · 45 comments
Closed

DatepickerIOS onDateChange reports the wrong date #8169

willmcneilly opened this issue Jun 16, 2016 · 45 comments
Labels
Bug Help Wanted :octocat: Issues ideal for external contributors. Platform: iOS iOS applications. Resolution: Locked This issue was locked by the bot.

Comments

@willmcneilly
Copy link

willmcneilly commented Jun 16, 2016

When using datepickerIOS the onDateChange callback sometimes reports the wrong date. By changing between date and month in quick succession you'll quickly find that the date reported by onDateChange is different from that shown on the datepicker. It's worth noting that the callback does fire correctly, it's just the date it provides is stale.

It's much easier to replicate on device but still possible on the simulator. Here's an example of the problem:
datepickerios

The code is straight forward:

class DatePickerBug extends Component {
  constructor(props) {
    super(props);
    this.state = {
      date: new Date()
    };
  }

  onDateChange(date) {
    this.setState({
      date: date
    });
  }

  render() {
    return (
      <View style={styles.container}>
        <Text>{this.state.date.toString()}</Text>
        <DatePickerIOS
          date={this.state.date}
          mode="date"
          onDateChange={(date) => this.onDateChange(date)}
        />
      </View>
    );
  }
}

We've noticed this issue in both 0.26 and 0.27. It didn't exist in 0.22 but because we upgraded our project in one move from 0.22 to 0.26 I'm unsure which version introduced the bug.

If anyone would like to get up and running with the example I have it here https://github.com/willmcneilly/RNDatepickerIOSBug

@vonovak
Copy link
Collaborator

vonovak commented Jun 20, 2016

Maybe git binary search could help tracking it down..

@ammichael
Copy link

ammichael commented Jun 27, 2016

I'm having this problem too. But since I'm using time mode, it's returning the wrong hour. Always 1 hour more than the selected. If I selected 9 AM, it returns me 10 AM..

RN 0.21.0

I'll try do upgrade and will report here later

Couldn't really try. When I updated to RN 0.28 my project exploded in so many ways I've to downgrade to 0.21 and relink all libs. Still having the problem.

@wsun
Copy link
Contributor

wsun commented Aug 9, 2016

I can confirm this bug was introduced in 0.26, as far as I can tell commit 47a470a seems to be the culprit. Haven't had a chance to investigate further.

cc @sebmarkbage

@sfrog
Copy link

sfrog commented Aug 23, 2016

Hi, I wonder know that whether the RN team notice this bug?

@sorenburon
Copy link

I'm also experiencing this issue, using RN 0.29.0.

@jgibbons
Copy link

same issue with RN 0.34 RC

@ammichael
Copy link

I still have this issue with RN 0.33 (kinda obvious since @jgibbons is reporting issues with RN 0.34 RC).

This is a really big issue :(

@tomazahlin
Copy link

tomazahlin commented Sep 28, 2016

Same here. It's hard to really tell what is wrong and I also have problem with output day being for 1 to big... I think it's related to timezone or to some old dates, because it works for some dates and not for the others.

@ammichael
Copy link

@tomazahlin I'm using time mode. What I've noticed is that the date is always the previous date you've set. If you set the date for day 2, then 4, then 10, you will end up with day 4.

What is really bugging me is.. Are we the only ones with this problem?! It has been 4 months since the first report. Makes me wonder if the RN team noticed this bug at all =(

@tomazahlin
Copy link

tomazahlin commented Sep 28, 2016

@ammichael I have just seen I had a totally another problem, which I solved. My problem was that the DatePickerIOS sometimes gave back a date object where day was 1 to less. I solved it by not doing let date = new Date(year,month,day);, but by doing let date = new Date(); date.setUTCFullYear(year,month,day); Using the provided example on the top it works flawlessly. The date always changes. I also cannot reproduce the problem which you describe, about the previous date being set. Maybe try cloning the Date object before setting it to state? I think if the same object reference is set to state or received by props, the component would not re-render. Just my suggestion what you could try.

@JakeRawr
Copy link
Contributor

@ammichael same issue here. I'm using "date" mode. An example is I scrolled to year 2014, then 1996, then 1992. the output stays at 1996. Same thing happens with month or day. What's weird is, it only happens from every so often.

@ammichael
Copy link

@tomazahlin I have tried to clone the Date object, but didn't matter =/

@JakeRawr That is why it is so frustrating! It doesn't happen every time, so you can't find a reliable solution..

@geekvijay
Copy link

i am using react-native 0.37.0 and In my case loadFromServer function prints old selected date instead of new picked date.

class DatePickerBug extends Component {
  constructor(props) {
    super(props);
    this.state = {
      date: new Date()
    };
  }

  loadFromServer() {
    // this prints old picked date instead of new picked date
    console.log(this.state.date);
  }

  onDateChange(date) {
    this.setState({
      date: date
    });
    this.loadFromServer();
  }

  render() {
    return (
      <View style={styles.container}>
        <Text>{this.state.date.toString()}</Text>
        <DatePickerIOS
          date={this.state.date}
          mode="date"
          onDateChange={(date) => this.onDateChange(date)}
        />
      </View>
    );
  }
}

@rdagger
Copy link

rdagger commented Feb 12, 2017

Same issue here.

@Mactub07
Copy link

see problem on RN-0.42 too

@davidpfahler
Copy link

davidpfahler commented Apr 20, 2017

This is still broken. It seems to be a problem on the native side, but I cannot fix the native plugin myself, unfortunately. Someone, please help out.


Update: Did some digging and the date is also wrong (i.e. stuck on the last date) inside RCTDatePicker.m (void)didChange, so the problem is before that function is being invoked.


Update 2: As a workaround, I wrapped a View around the DatePickerIOS component to block pointer-events for 500ms after the onDateChange handler was called. This is not ideal, but prevents the user to see false data.

@varungupta85
Copy link
Contributor

varungupta85 commented May 3, 2017

@davidpfahler Do you mind sharing the code that you have used to wrap a View around the date time picker and block the pointer events?

This is what I have right now. Just wanted to make sure I didn't miss anything

class DatePicker extends Component {
  state = {
    allowPointerEvents: true
  }

  onDateChange = (date) => {
    this.props.onDateChange(date)
    this.setState({
      allowPointerEvents: false
    })
    const timeoutId = setTimeout(() => {
      this.setState({
        allowPointerEvents: true
      })
      clearTimeout(timeoutId)
    }, 500)
  }

  render() {
    return (
      <View pointerEvents={this.state.allowPointerEvents ? 'auto' : 'none'}>
        <DatePickerIOS {...this.props} onDateChange={this.onDateChange} />
      </View>
    );
  }
}

Update May 15, 2017
Users started to complain after I plugged in the above workaround and it is still possible to get false data with the above workaround. One way to get false data even with the above workaround is when the user moves the minutes and when the minutes' carousel is about to stop just move the hour hand slightly such that it doesn't change the hour but it does move a little.

It would be great if somebody with native iOS experience could look into it.

@ghuh
Copy link

ghuh commented Jun 11, 2017

This is still a bug as of RN 0.44.3

@varungupta85
Copy link
Contributor

This actually is a bug in the iOS itself. I can easily reproduce this problem in the native Reminders and Calendar app.

@dgladkov
Copy link
Contributor

dgladkov commented Aug 2, 2017

Spent past couple of days fighting this bug, according to my findings problem is that action for UIControlEventValueChanged does not fire at all in some cases [1], specifically if you turn multiple wheels simultaneously in same direction. This is indeed a bug in iOS itself, not in React Native.

I worked around that problem by making a custom native getter method that returns UIDatePicker's date, thus effectively making datepicker uncontrolled. If anyone is interested in this solution, I can make a PR for this.

[1] https://github.com/facebook/react-native/blob/master/React/Views/RCTDatePicker.m#L34

@varungupta85
Copy link
Contributor

@dgladkov Very interested. I would be happy to just know what I need to change in the RCTDatePicker.m file to get around this problem and try it myself.

@dgladkov
Copy link
Contributor

dgladkov commented Aug 2, 2017

@varungupta85 I've released my uncontrolled DatePicker version as a library: https://github.com/dgladkov/react-native-uncontrolled-date-picker-ios

I've tried to add getDate method to RCTDatePicker and submit a PR, but current implementation aggressively updates date on each change event, so my approach will not work unless I change current behavior.

@varungupta85
Copy link
Contributor

Thanks @dgladkov. I will try it out.

@JolieNguyen
Copy link

This is how I fix it:
onDateChange(date){
var _date = new Date(date);
_date.setMinutes( _date.getMinutes() - _date.getTimezoneOffset());
this.setState({birthday: _date});
}

Hope it useful!

@antoinerousseau
Copy link
Contributor

antoinerousseau commented Oct 19, 2017

I'm having a weird bug: the date picker reports a wrong date only if my phone's timezone is set to "auto", but not if I manually set it (to the same TZ...)

I'm in Paris TZ (UTC+2).
iPhone SE, iOS 11, RN 0.49.

@SudoPlz
Copy link
Contributor

SudoPlz commented Oct 22, 2017

Still a problem in 0.49, how can we let the RN team know about this? It seems to be lost in the endless issue graveyard.

Here's a link to product pains, in case that makes any difference.

Please vote for it if you want that fixed.

https://react-native.canny.io/feature-requests/p/datepickerios-wrong-date-or-time

@stale stale bot removed the Stale There has been a lack of activity on this issue and it may be closed soon. label Jan 30, 2018
@abarisic86
Copy link

I upgraded project from @willmcneilly to latest stable versions of React & React Native. The bug is still there.

"react": "^16.2.0",
"react-native": "^0.52.2"

@berkcoker
Copy link

Yeap I can confirm that the bug is still there.

"react": "^16.2.0",
"react-native": "^0.52.2"

@jasperkuperus
Copy link

Also seeing this on recent React Native versions.

Packages: (wanted => installed)
  react: 16.0.0 => 16.0.0
  react-native: 0.51.0 => 0.51.0

This comment describes very nicely how to reproduce this: #4787 (comment)

@SudoPlz
Copy link
Contributor

SudoPlz commented Feb 13, 2018

react-native-modal-datetime-picker now supports custom picker components.
I've resolved this by using the following code:
mmazzarolo/react-native-modal-datetime-picker#115 (comment)
and it works great.

@jasperkuperus
Copy link

https://github.com/dgladkov/react-native-uncontrolled-date-picker-ios works great for me. Would be awesome to add this API in the original DatePickerIOS API, is there anyway to get this under the attention of the React Native team? This issue has been there for as early as December 2015...

@janziemba
Copy link

https://github.com/dgladkov/react-native-uncontrolled-date-picker-ios doesn't work for me.

I believe this is not a RN issue because it doesn't work in Apple Calendar either.

img_1012
img_1013

@kevinEsherick
Copy link

For anyone having issues I recommend @dgladkov 's component. Works well for me
https://github.com/dgladkov/react-native-uncontrolled-date-picker-ios

@coderdave
Copy link

coderdave commented Apr 10, 2018

Did this commit (446ce49) in 0.55 fix this issue?

I was getting intermittent results in the first place, so it's hard to tell. 🤔

The comment for the new initialDate prop says: "The controlled state has known bugs which causes it to go out of sync with native. The initialDate prop is intended to allow you to have native be source of truth."

I'm using the initialDate prop now and I haven't seen the issue yet, but I still need more testing to be sure.

@sam1463
Copy link

sam1463 commented Nov 16, 2018

Although https://github.com/dgladkov/react-native-uncontrolled-date-picker-ios seems to fix this issue, it doesn't support the locale prop, which is needed for a work-around to support 24 hour time, so it's not really a solution for this issue.

@grabbou
Copy link
Contributor

grabbou commented Mar 19, 2019

Closing this issue as various comments earlier in this thread suggest this is a bug in iOS that can be also reproduced in the Apple Calendar app.

There were also some other interesting workarounds suggested and alternative components.

DatePickerIOS is going to be extracted out soon to a separate repository where we will be able to commit more code, including workaround for this issue to be available out of the box.

@lunatupini
Copy link

This issue has been fixed on recently updates? I'm currently on version 0.59.9 and this appear to be fixed.

@SpectorHacked
Copy link

Still having this issue, using range, when logging the dates it logging the right date, but when formatting the date something is going wrong, react native 0.61:(

@stefanocapitanio
Copy link

Me too, same issue using countdown with React Native 0.59.9

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Bug Help Wanted :octocat: Issues ideal for external contributors. Platform: iOS iOS applications. Resolution: Locked This issue was locked by the bot.
Projects
None yet
Development

No branches or pull requests