Wrong day for 1970s and 1980s

[Gonzalo8642]

Bug report

Summary

When using date mode I'm seeing the picker display the previous day instead of the day provided.

Reproducible sample code

I've built a new expo project and used the "Basic usage with state" example from the readme. The only difference is the date is initialized to new Date('04/21/1972') instead of new Date(1598051730000)

import React, {useState} from 'react';
import {View, Button, Platform} from 'react-native';
import DateTimePicker from '@react-native-community/datetimepicker';

export const App = () => {
  const [date, setDate] = useState(new Date('04/21/1972'));
  const [mode, setMode] = useState('date');
  const [show, setShow] = useState(false);

  const onChange = (event, selectedDate) => {
    const currentDate = selectedDate || date;
    setShow(Platform.OS === 'ios');
    setDate(currentDate);
  };

  const showMode = (currentMode) => {
    setShow(true);
    setMode(currentMode);
  };

  const showDatepicker = () => {
    showMode('date');
  };

  const showTimepicker = () => {
    showMode('time');
  };

  return (
    <View>
      <View>
        <Button onPress={showDatepicker} title="Show date picker!" />
      </View>
      <View>
        <Button onPress={showTimepicker} title="Show time picker!" />
      </View>
      {show && (
        <DateTimePicker
          testID="dateTimePicker"
          value={date}
          mode={mode}
          is24Hour={true}
          display="default"
          onChange={onChange}
        />
      )}
    </View>
  );
};

Steps to reproduce

1. Set the initial date to a date between 1971-1985 (Ex 04/21/1972)
2. Click on "Show date picker!"
3. Notice the date is initialized to the day before (4/20/1972)

Describe what you expected to happen:

1. Set the initial date to a date between 1971-1985 (Ex 04/21/1972)
2. Click on "Show date picker!"
3. The date is initialized to the day the provided date (4/21/1972)

Environment info

using expo version 4.4.3 npx react-native info output:

info Fetching system and libraries information...
System:
    OS: macOS 10.15.7
    CPU: (8) x64 Intel(R) Core(TM) i5-8259U CPU @ 2.30GHz
    Memory: 92.94 MB / 8.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 12.21.0 - ~/.nvm/versions/node/v12.21.0/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.11 - ~/.nvm/versions/node/v12.21.0/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.8.4 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 14.0, DriverKit 19.0, macOS 10.15, tvOS 14.0, watchOS 7.0
    Android SDK: Not Found
  IDEs:
    Android Studio: 3.4 AI-183.6156.11.34.5522156
    Xcode: 12.0/12A7209 - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.7 - /usr/bin/javac
    Python: 3.9.2 - /Users/username/.pyenv/shims/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.13.1 => 16.13.1
    react-native: https://github.com/expo/react-native/archive/sdk-41.0.0.tar.gz => 0.63.2
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

datetimepicker version: 3.4.7

iOS / Android version: iOS version 14.0

[Gazfay]

Any updates? I have the same bug.

[Gonzalo8642]

Seems the default offset isn't working. I This solution worked for me https://github.com/react-native-datetimepicker/datetimepicker/issues/114#issuecomment-679184055

[vonovak]

Hello and thanks for reporting, Please have a look at https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/Date

specifically:

Date-only strings (e.g. "1970-01-01") are treated as UTC, while date-time strings (e.g. "1970-01-01T12:00") are treated as local. You are therefore also advised to make sure the input format is consistent between the two types.

What this means is that you created a Date instance that is in UTC and if you're west from UTC you'll be on 20th instead of 21st.

Make sure that the date is created with local time, not UTC. Thank you 🙂