datetimepicker icon indicating copy to clipboard operation
datetimepicker copied to clipboard
verified publisher icon react-native-datetimepicker

Inconsistent display of dates on iOS mode ='date' if inside a view with flexDirection: 'row'

Open Ravendarksky opened this issue 3 years ago • 9 comments

Bug report

Summary

If I wrap the DateTimePicker inside a view that has flexDirection: 'row' set on it then dates are formatted inconsistently when selected.

For example 19/12/2022 will display as "Dec 19, 2022" but 20/12/2022 will display as "12/20/2022"

Reproducible sample code

import React from 'react'; //"react": "18.1.0",
import { StyleSheet, View } from 'react-native'; // "react-native": "0.70.5",
import DateTimePicker from '@react-native-community/datetimepicker'; //"@react-native-community/datetimepicker": "6.7.1",

const Demo = () => {
  return (
    <View style={styles.wrapper}>
      <DateTimePicker value={new Date()} mode={'date'} />
    </View>
  );
};

export default Demo;

const styles = StyleSheet.create({
  wrapper: {
    paddingTop: 200,
    flexDirection: 'row', // This breaks it
  },
});

Steps to reproduce

  1. Run iOS simulator or physical iOS device
  2. Open Date picker
  3. Select 19th December 2022 and see date format is as expected
  4. Select 20th December 2022 and see date format is not as expected

Describe what you expected to happen:

Both dates should have the same format.

Environment info

npx react-native info output:

System:
    OS: macOS 13.0.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 85.77 MB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.18.1 - ~/.nvm/versions/node/v16.18.1/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 7.24.2 - ~/source/qba/XXX/XXX/node_modules/.bin/npm
    Watchman: 2022.11.28.00 - /opt/homebrew/bin/watchman
  Managers:
    CocoaPods: 1.11.3 - /Users/XXX/.rbenv/shims/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 22.1, iOS 16.1, macOS 13.0, tvOS 16.1, watchOS 9.1
    Android SDK: Not Found
  IDEs:
    Android Studio: 2021.3 AI-213.7172.25.2113.9123335
    Xcode: 14.1/14B47b - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.14 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 18.1.0 => 18.1.0 
    react-native: 0.70.5 => 0.70.5 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

datetimepicker version: 6.7.1 iOS version: 16.1

Ravendarksky avatar Dec 19 '22 14:12 Ravendarksky

Experiencing this same issue.

System:
    OS: macOS 13.0.1
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 472.85 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 14.21.1 - /usr/local/opt/node@14/bin/node
    Yarn: 1.22.18 - /usr/local/bin/yarn
    npm: 6.14.17 - /usr/local/opt/node@14/bin/npm
    Watchman: 2022.10.17.00 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.11.3 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 22.1, iOS 16.1, macOS 13.0, tvOS 16.1, watchOS 9.1
    Android SDK: Not Found
  IDEs:
    Android Studio: 2021.3 AI-213.7172.25.2113.9123335
    Xcode: 14.1/14B47b - /usr/bin/xcodebuild
  Languages:
    Java: 17.0.2 - /usr/local/opt/openjdk/bin/javac
    Python: Not Found
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.11.0 => 16.11.0 
    react-native: ^0.63.0 => 0.63.5 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found
    ```
    
 datetimepicker version: 6.7.1
iOS version: 16.1

Falpangaea avatar Jan 07 '23 23:01 Falpangaea

I am seeing the same issue.

The positioning of the date label itself looks to be maybe not built for flex box... Positioning the label with an alignItems on a parent component with a flexDirection of column also creates the different date format issue (depending on the date you choose). Also, if you just plop the picker into a new app with a parent component having the flex: 1 style, the date label aligns itself all the way on the right side of the screen, where most children default to flex-start / the left side of the screen.

System:
    OS: macOS 13.0.1
    CPU: (8) arm64 Apple M2
    Memory: 142.44 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.19.0 - ~/.asdf/installs/nodejs/16.19.0/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 8.19.3 - ~/.asdf/plugins/nodejs/shims/npm
    Watchman: Not Found
  Managers:
    CocoaPods: 1.11.3 - /Users/nick/.asdf/shims/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 22.2, iOS 16.2, macOS 13.1, tvOS 16.1, watchOS 9.1
    Android SDK: Not Found
  IDEs:
    Android Studio: 2022.1 AI-221.6008.13.2211.9477386
    Xcode: 14.2/14C18 - /usr/bin/xcodebuild
  Languages:
    Java: 19.0.1 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 18.1.0 => 18.1.0
    react-native: 0.70.5 => 0.70.5
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

pachun avatar Feb 09 '23 21:02 pachun

after wrapping the component using a View and giving style flex=1 it seems to solve the problem.


<View style={{ flex: 1 }}>
        <DateTimePicker
            accentColor={theme.colors.primary}
            value={createRequest[item.id] ?? new Date()}
            themeVariant={theme.mode}
            onChange={(e, val) => setCreateRequest((ps) => ({ ...ps, [item.id]: val }))}
        />
</View>

imsaha avatar Feb 24 '23 11:02 imsaha

Any solutions for this?

artklen avatar Mar 27 '23 13:03 artklen

@artklen My approach was to bypass the issue.

I'm using iOS datepicker in inline mode so its always open and I've moved the whole thing into a modal.

I'm then using my own custom component to display the selected values and when you press on it the selection modal opens.

This is nice anyway because then you can guarantee the same display for iOS and android without the need of the clunky separate android only display

Sorry probably not the answer you're looking for.

Ravendarksky avatar Mar 30 '23 12:03 Ravendarksky

This will set the date field to the left side of the screen on IOS

<View style={{ flex: 1, alignItems:'flex-start' }}> <DateTimePicker themeVariant="light" mode={type} value={new Date()} onChange={handleDate} /> </View>

itsaliraxa avatar Sep 20 '23 12:09 itsaliraxa

This will set the date field to the left side of the screen on IOS

<View style={{ flex: 1, alignItems:'flex-start' }}> <DateTimePicker themeVariant="light" mode={type} value={new Date()} onChange={handleDate} />

@artklen please check this.

itsaliraxa avatar Sep 20 '23 12:09 itsaliraxa

Setting <View style={{ flex: 1, alignItems:'flex-start' }}>

does align to the left (though not completely). However the date is still displayed inconsistently even with the flex as a column. This occurs for me when going from a single digit day to a double digit. eg,

May 5th, 2023 5/15/2023

Setting width 100% on datepicker solves the inconsistency, however then it is right aligned once more. Set a unit width to align it mostly to the left, but it still wants to float to the right.

chris-hud avatar Oct 06 '23 18:10 chris-hud

Setting <View style={{ flex: 1, alignItems:'flex-start' }}>

does align to the left (though not completely). However the date is still displayed inconsistently even with the flex as a column. This occurs for me when going from a single digit day to a double digit. eg,

May 5th, 2023 5/15/2023

Setting width 100% on datepicker solves the inconsistency, however then it is right aligned once more. Set a unit width to align it mostly to the left, but it still wants to float to the right.

I'm experiencing exactly this, any workarounds out there?

esmailbenmoussa avatar Mar 07 '24 11:03 esmailbenmoussa