Datetimepicker: Issue with timezones on iOS

[inferusvv]

Bug

In years between 1981-1989 _onChange method return wrong GMT and timezone offset.

The issue is here: https://github.com/react-native-community/react-native-datetimepicker/blob/master/src/datetimepicker.ios.js#L54

1. My timezone is GMT +3. This is important.
2. I've placed console.logs here like that:

    if (timestamp) {
      date = new Date(timestamp);
      console.log('_onChange date', date);
      console.log('timezoneoffset', date.getTimezoneOffset());
    }

1. Here is what I have

So let me describe issue.

When I pick 1st May 1990 I get 30 Apr and 21:00. It's ok. Because it is ISO string. In my timezone it is 1 May 00:00.

But when I change year to 1989 I get 30 Apr and 20:00. console.log('timezoneoffset', date.getTimezoneOffset()); still returns -180 which means 3 hours difference. And in this case when I work with date in my timezone, I actually have 30 Apr 23:00. Why that? I see _onChange method handled by native module. This is the only I found.

Environment info

React native info output:

System:
    OS: macOS 10.15.1
    CPU: (8) x64 Intel(R) Core(TM) i5-8259U CPU @ 2.30GHz
    Memory: 56.36 MB / 8.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 12.12.0 - /usr/local/bin/node
    Yarn: 1.19.1 - /usr/local/bin/yarn
    npm: 6.11.3 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
    Android SDK:
      API Levels: 23, 25, 26, 27, 28
      Build Tools: 27.0.3, 28.0.3
  IDEs:
    Xcode: 11.2.1/11B500 - /usr/bin/xcodebuild
  npmPackages:
    react: ^16.10.1 => 16.12.0 
    react-native: ^0.61.2 => 0.61.5

Library version: 2.1.0

[oikiyuto]

I have same Issue.
Does anyone know how to fix?

[naxel]

my workaround:

moment(date).add(date.getTimezoneOffset() * -1, 'minutes')

[greatwitenorth]

It appears there's also a difference with the way the date and time is reported on android vs ios. When I console.log the value of the selected date (Mar 24 2020) here's what I get:

2020-03-25T00:00:00.000Z <-- iOS
2020-03-24T20:58:21.197Z <-- Android

Note that I'm only using the date selection. Both devices are set the same timezone (GMT-05:00).

[GollyJer]

Came looking into a similar issue.
We're also only using the date picker. mode="date".

It seems the picker returns the picked date and the current time in a UTC datetime stamp.

example...
It's 9:00PM in my time zone; UTC-7, United States, Los Angeles.
When I pick October, 17th, 1977 from the date picker it returns:
1977-10-18T04:00:00.000Z
Which is the picked date and the current time expressed in straight up UTC.

To get it back to local time requires the reverse.
So, using expo and our preferred time packages date-fns, and the accompanying date-fns-tz, this is what we're doing.

Use this function in the onChange event.

import * as Localization from 'expo-localization';
import { format } from 'date-fns';
import { zonedTimeToUtc } from 'date-fns-tz';

const onDatePickerChange = async (event, pickedDateString) => {
  console.log(pickedDateString);
  if (event.type === 'set') {
    const localizedDate = zonedTimeToUtc(pickedDateString, Localization.locale);
    console.log(localizedDate.toISOString());

    const dateOnlyUSAFormat = format(localizedDate, 'dd-MM-y');
    console.log(dateOnlyUSAFormat);
  }
  setIsDatePickerVisible(false);
};

It will log
1977-10-18T04:00:00.000Z
1977-10-17T21:00:00.000Z
10-17-1977

Hopefully that helps someone else. Took a while to figure out what was going on.

👍