DatepickerIOS onDateChange reports the wrong date

[willmcneilly]

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:

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]

Maybe git binary search could help tracking it down..

[ammichael]

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]

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]

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

[sorenburon]

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

[jgibbons]

same issue with RN 0.34 RC

[ammichael]

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]

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]

@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]

@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]

@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]

@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]

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>
    );
  }
}