Date Selected is One Day Off

Hi, I’m having an interesting issue with my usage of the datepicker component.

My code is pretty basic, it looks like this:

<ReactDatePicker
  onChange={(val) => this.handleChange(val)}
  selected={this.state.currentDate}
/>

and my handler fn

  handleChange(momentDate) {
    console.log(momentDate.toISOString())
    this.setState({currentDate: momentDate});
  }

The issue that I see is that when I select a date from the dropdown, the visual aspects of the component appear to be working fine – I select 09/10 (sept 10th) and that’s what I see in the input field.

However, in my console.log() in my handler function, I see that when I select 09/10, the output is 2017-09-09T21:00:00.000Z. momentDate.toISOString() is ultimately what I’m sending to the DB to be saved, so it’s problematic that it’s one day off.

I’m not sure what to make of this. I was expecting to see 2017-09-10T21:00:00.000Z. It looks like momentDate is localized, so if I’m in a UTC + 3 timezone and choose 09/10 00:00:00, I’m actually choosing 09/09 21:00:00 (my hypothesis). Even if I set the utcOffset prop to 0 it looks like the localization is still happening.

Am I doing something wrong? Is there a way for me to just kind of…turn off the localization? I’m using the component purely to just pick a day in the calendar. I don’t care what timezone they’re in, if they pick 09/10, they pick 09/10.

Thanks!

[FatehAK]

This works: const offsetDate = new Date(selected.getTime() - (selected.getTimezoneOffset() * 60000));

Just put it in onChange() handler

[nwkeeley]

Also experiencing this issue.

I open it up, select date its off by 1 day. I then open it up and select any other subsequent day and its correct.