@react-native-community/datetimepicker - npm Package Compare versions

Comparing version 7.2.0 to 7.6.1

jest/index.js

@@ -15,15 +15,8 @@ /**
       const pickedDate = new Date(timestampFromPickerValueProp);
-      pickedDate.setFullYear(
-        datePickedByUser.getFullYear(),
-        datePickedByUser.getMonth(),
-        datePickedByUser.getDate(),
-      );
+      pickedDate.setTime(datePickedByUser.getTime());
 
       return {
         action: DATE_SET_ACTION,
-        year: pickedDate.getFullYear(),
-        month: pickedDate.getMonth(),
-        day: pickedDate.getDate(),
-        hour: pickedDate.getHours(),
-        minute: pickedDate.getMinutes(),
+        timestamp: pickedDate.getTime(),
+        utcOffset: 0,
       };
@@ -30,0 +23,0 @@ }

package.json

 {
   "name": "@react-native-community/datetimepicker",
-  "version": "7.2.0",
+  "version": "7.6.1",
   "description": "DateTimePicker component for React Native",
@@ -84,2 +84,3 @@ "main": "./src/index.js",
     "moment": "^2.24.0",
+    "moment-timezone": "^0.5.41",
     "patch-package": "^6.4.7",
@@ -86,0 +87,0 @@ "postinstall-postinstall": "^2.1.0",

README.md

@@ -69,2 +69,3 @@ ### 🚧🚧 Looking for collaborators and financial backers 🚧🚧
     - [`minimumDate` (`optional`)](#minimumdate-optional)
+    - [`timeZoneName` (`optional`, `iOS or Android only`)](#timeZoneName-optional-ios-and-android-only)
     - [`timeZoneOffsetInMinutes` (`optional`, `iOS or Android only`)](#timezoneoffsetinminutes-optional-ios-and-android-only)
@@ -172,7 +173,7 @@ - [`timeZoneOffsetInSeconds` (`optional`, `Windows only`)](#timezoneoffsetinsecond-optional-windows-only)
   return (
-    <View>
+    <SafeAreaView>
       <Button onPress={showDatepicker} title="Show date picker!" />
       <Button onPress={showTimepicker} title="Show time picker!" />
       <Text>selected: {date.toLocaleString()}</Text>
-    </View>
+    </SafeAreaView>
   );
@@ -197,6 +198,3 @@ };
   const showMode = (currentMode) => {
-    if (Platform.OS === 'android') {
-      setShow(false);
-      // for iOS, add a button that closes the picker
-    }
+    setShow(true);
     setMode(currentMode);
@@ -214,3 +212,3 @@ };
   return (
-    <View>
+    <SafeAreaView>
       <Button onPress={showDatepicker} title="Show date picker!" />
@@ -228,3 +226,3 @@ <Button onPress={showTimepicker} title="Show time picker!" />
       )}
-    </View>
+    </SafeAreaView>
   );
@@ -320,2 +318,4 @@ };
 
+The `utcOffset` field is only available on Android and iOS. It is the offset in minutes between the selected date and UTC time.
+
 ```js
@@ -325,3 +325,3 @@ const setDate = (event: DateTimePickerEvent, date: Date) => {
     type,
-    nativeEvent: {timestamp},
+    nativeEvent: {timestamp, utcOffset},
   } = event;
@@ -357,7 +357,18 @@ };
 
+#### `timeZoneName` (`optional`, `iOS and Android only`)
+
+Allows changing of the time zone of the date picker. By default, it uses the device's time zone.
+Use the time zone name from the IANA (TZDB) database name in https://en.wikipedia.org/wiki/List_of_tz_database_time_zones.
+
+```js
+<RNDateTimePicker timeZoneName={'Europe/Prague'} />
+```
+
 #### `timeZoneOffsetInMinutes` (`optional`, `iOS and Android only`)
 
-Allows changing of the timeZone of the date picker. By default, it uses the device's time zone.
-We strongly recommend avoiding this prop on android because of known issues in the implementation (eg. [#528](https://github.com/react-native-datetimepicker/datetimepicker/issues/528)).
+Allows changing of the time zone of the date picker. By default, it uses the device's time zone.
+We **strongly** recommend using `timeZoneName` prop instead; this prop has known issues in the android implementation (eg. [#528](https://github.com/react-native-datetimepicker/datetimepicker/issues/528)).
 
+This prop will be removed in a future release.
+
 ```js
@@ -531,2 +542,11 @@ // GMT+1
 
+#### `testID` (`optional`)
+
+Usually used by app automation frameworks.
+Fully supported on iOS. On Android, only supported for `mode="date"`.
+
+```js
+<RNDateTimePicker testID="datePicker" />
+```
+
 #### `View Props` (`optional`, `iOS only`)
@@ -533,0 +553,0 @@

src/androidUtils.js

@@ -5,3 +5,3 @@ /**
  */
-import {ANDROID_DISPLAY, ANDROID_MODE, MIN_MS} from './constants';
+import {ANDROID_DISPLAY, ANDROID_MODE} from './constants';
 import pickers from './picker';
@@ -28,2 +28,4 @@ import type {AndroidNativeProps, DateTimePickerResult} from './types';
   timeZoneOffsetInMinutes: AndroidNativeProps['timeZoneOffsetInMinutes'],
+  timeZoneName: AndroidNativeProps['timeZoneName'],
+  testID: AndroidNativeProps['testID'],
   dialogButtons: {
@@ -50,2 +52,3 @@ positive: ProcessedButton,
         timeZoneOffsetInMinutes,
+        timeZoneName,
         dialogButtons,
@@ -60,2 +63,3 @@ }: OpenParams) =>
           timeZoneOffsetInMinutes,
+          timeZoneName,
           dialogButtons,
@@ -70,3 +74,5 @@ });
         timeZoneOffsetInMinutes,
+        timeZoneName,
         dialogButtons,
+        testID,
       }: OpenParams) =>
@@ -80,3 +86,5 @@ // $FlowFixMe - `AbstractComponent` [1] is not an instance type.
           timeZoneOffsetInMinutes,
+          timeZoneName,
           dialogButtons,
+          testID,
         });
@@ -86,16 +94,2 @@ }
 
-function timeZoneOffsetDateSetter(
-  date: Date,
-  timeZoneOffsetInMinutes: ?number,
-): Date {
-  if (typeof timeZoneOffsetInMinutes === 'number') {
-    // FIXME this causes a bug. repro: set tz offset to zero, and then keep opening and closing the calendar picker
-    // https://github.com/react-native-datetimepicker/datetimepicker/issues/528
-    const offset = date.getTimezoneOffset() + timeZoneOffsetInMinutes;
-    const shiftedDate = new Date(date.getTime() - offset * MIN_MS);
-    return shiftedDate;
-  }
-  return date;
-}
-
 function validateAndroidProps(props: AndroidNativeProps) {
@@ -120,2 +114,2 @@ sharedPropsValidation({value: props?.value});
 }
-export {getOpenPicker, timeZoneOffsetDateSetter, validateAndroidProps};
+export {getOpenPicker, validateAndroidProps};

src/datepicker.android.js

@@ -24,2 +24,3 @@ /**
    *   - `maximumDate` (`Date` object) - maximum date that can be selected
+   *   - `testID` (`string`) - Sets view tag for use with automation frameworks
    *   - `display` (`enum('calendar', 'spinner', 'default')`) - To set the date-picker display to calendar/spinner/default
@@ -26,0 +27,0 @@ *     - 'calendar': Show a date picker in calendar mode.

src/datetimepicker.android.js

@@ -27,2 +27,3 @@ /**
     timeZoneOffsetInMinutes,
+    timeZoneName,
     positiveButton,
@@ -34,2 +35,3 @@ negativeButton,
     neutralButtonLabel,
+    testID,
   } = props;
@@ -55,2 +57,3 @@ const valueTimestamp = value.getTime();
         timeZoneOffsetInMinutes,
+        timeZoneName,
         onError,
@@ -64,2 +67,3 @@ onChange,
         neutralButtonLabel,
+        testID,
       };
@@ -66,0 +70,0 @@ DateTimePickerAndroid.open(params);

src/datetimepicker.ios.js

@@ -53,2 +53,3 @@ /**
   timeZoneOffsetInMinutes,
+  timeZoneName,
   textColor,
@@ -63,3 +64,3 @@ accentColor,
 }: IOSNativeProps): React.Node {
-  sharedPropsValidation({value});
+  sharedPropsValidation({value, timeZoneOffsetInMinutes, timeZoneName});
 
@@ -88,2 +89,3 @@ const display = getDisplaySafe(providedDisplay);
             timestamp: value.getTime(),
+            utcOffset: 0, // TODO vonovak - the dismiss event should not carry any date information
           },
@@ -105,2 +107,3 @@ },
       timeZoneOffsetInMinutes={timeZoneOffsetInMinutes}
+      timeZoneName={timeZoneName}
       onChange={_onChange}
@@ -107,0 +110,0 @@ onPickerDismiss={onDismiss}

src/datetimepicker.windows.js

@@ -42,2 +42,3 @@ /**
   const localProps = {
+    accessibilityLabel: props.accessibilityLabel,
     dayOfWeekFormat: props.dayOfWeekFormat,
@@ -58,3 +59,7 @@ dateFormat: props.dateFormat,
       ...event,
-      nativeEvent: {...event.nativeEvent, timestamp: event.nativeEvent.newDate},
+      nativeEvent: {
+        ...event.nativeEvent,
+        timestamp: event.nativeEvent.newDate,
+        utcOffset: 0,
+      },
       type: EVENT_TYPE_SET,
@@ -61,0 +66,0 @@ };

src/DateTimePickerAndroid.android.js

@@ -16,7 +16,3 @@ /**
 import type {AndroidNativeProps} from './types';
-import {
-  getOpenPicker,
-  timeZoneOffsetDateSetter,
-  validateAndroidProps,
-} from './androidUtils';
+import {getOpenPicker, validateAndroidProps} from './androidUtils';
 import pickers from './picker';
@@ -40,2 +36,3 @@ import {
     timeZoneOffsetInMinutes,
+    timeZoneName,
     onChange,
@@ -49,2 +46,3 @@ onError,
     negativeButtonLabel,
+    testID,
   } = props;
@@ -81,3 +79,3 @@ validateAndroidProps(props);
           : ANDROID_DISPLAY.default;
-      const {action, day, month, year, minute, hour} = await openPicker({
+      const {action, timestamp, utcOffset} = await openPicker({
         value: valueTimestamp,
@@ -90,20 +88,12 @@ display: displayOverride,
         timeZoneOffsetInMinutes,
+        timeZoneName,
         dialogButtons,
+        testID,
       });
 
       switch (action) {
-        case DATE_SET_ACTION: {
-          let date = new Date(valueTimestamp);
-          date.setFullYear(year, month, day);
-          date = timeZoneOffsetDateSetter(date, timeZoneOffsetInMinutes);
-          const [event] = createDateTimeSetEvtParams(date);
-          onChange?.(event, date);
-          break;
-        }
-
+        case DATE_SET_ACTION:
         case TIME_SET_ACTION: {
-          let date = new Date(valueTimestamp);
-          date.setHours(hour, minute);
-          date = timeZoneOffsetDateSetter(date, timeZoneOffsetInMinutes);
-          const [event] = createDateTimeSetEvtParams(date);
+          const date = new Date(timestamp);
+          const [event] = createDateTimeSetEvtParams(date, utcOffset);
           onChange?.(event, date);
@@ -114,3 +104,3 @@ break;
         case NEUTRAL_BUTTON_ACTION: {
-          const [event] = createNeutralEvtParams(originalValue);
+          const [event] = createNeutralEvtParams(originalValue, utcOffset);
           onChange?.(event, originalValue);
@@ -121,3 +111,3 @@ break;
         default: {
-          const [event] = createDismissEvtParams(originalValue);
+          const [event] = createDismissEvtParams(originalValue, utcOffset);
           onChange?.(event, originalValue);
@@ -124,0 +114,0 @@ break;

src/eventCreators.js

@@ -9,2 +9,3 @@ /**
   date: Date,
+  utcOffset: number,
 ): [DateTimePickerEvent, Date] => {
@@ -16,2 +17,3 @@ return [
         timestamp: date.getTime(),
+        utcOffset,
       },
@@ -25,2 +27,3 @@ },
   date: Date,
+  utcOffset: number,
 ): [DateTimePickerEvent, Date] => {
@@ -32,2 +35,3 @@ return [
         timestamp: date.getTime(),
+        utcOffset,
       },
@@ -41,2 +45,3 @@ },
   date: Date,
+  utcOffset: number,
 ): [DateTimePickerEvent, Date] => {
@@ -48,2 +53,3 @@ return [
         timestamp: date.getTime(),
+        utcOffset,
       },
@@ -50,0 +56,0 @@ },

src/index.d.ts

@@ -22,3 +22,4 @@ import {FC, Ref, SyntheticEvent} from 'react';
   nativeEvent: {
-    timestamp?: number;
+    timestamp: number;
+    utcOffset: number;
   };
@@ -67,3 +68,11 @@ };
 
-export type BaseProps = Readonly<Omit<ViewProps, 'children'> & DateOptions>;
+export type BaseProps = Readonly<
+  Omit<ViewProps, 'children'> &
+    DateOptions & {
+      /**
+       * The tz database name in https://en.wikipedia.org/wiki/List_of_tz_database_time_zones
+       */
+      timeZoneName?: string;
+    }
+>;
 
@@ -207,2 +216,3 @@ export type IOSNativeProps = Readonly<
       minuteInterval?: number;
+      accessibilityLabel?: string;
     }
@@ -209,0 +219,0 @@ >;

src/specs/NativeComponentDateTimePicker.js

@@ -16,2 +16,3 @@ // @flow strict-local
   timestamp: Double,
+  utcOffset: Int32,
 |}>;
@@ -30,2 +31,3 @@
   timeZoneOffsetInMinutes?: ?Double,
+  timeZoneName?: ?string,
   textColor?: ?ColorValue,
@@ -32,0 +34,0 @@ accentColor?: ?ColorValue,

src/specs/NativeModuleDatePicker.js

@@ -15,2 +15,2 @@ // @flow strict-local
 
-export default (TurboModuleRegistry.getEnforcing<Spec>('RNDatePicker'): ?Spec);
+export default (TurboModuleRegistry.getEnforcing<Spec>('RNCDatePicker'): ?Spec);

src/specs/NativeModuleTimePicker.js

@@ -16,2 +16,2 @@ // @flow strict-local
 
-export default (TurboModuleRegistry.getEnforcing<Spec>('RNTimePicker'): ?Spec);
+export default (TurboModuleRegistry.getEnforcing<Spec>('RNCTimePicker'): ?Spec);

src/types.js

@@ -32,2 +32,3 @@ /**
     timestamp: number,
+    utcOffset: number,
   |}>,
@@ -39,3 +40,4 @@ >;
   nativeEvent: $ReadOnly<{
-    timestamp?: number,
+    timestamp: number,
+    utcOffset: number,
     ...
@@ -97,2 +99,9 @@ }>,
   ...DateOptions,
+  /**
+   * Timezone in database name.
+   *
+   * By default, the date picker will use the device's timezone. With this
+   * parameter, it is possible to force a certain timezone based on IANA
+   */
+  timeZoneName?: ?string,
 |}>;
@@ -181,2 +190,3 @@
   timeZoneOffsetInMinutes?: ?number,
+
   /**
@@ -218,7 +228,4 @@ * The interval at which minutes can be selected.
   action: 'timeSetAction' | 'dateSetAction' | 'dismissedAction',
-  year: number,
-  month: number,
-  day: number,
-  hour: number,
-  minute: number,
+  timestamp: number,
+  utcOffset: number,
 |}>;
@@ -255,2 +262,3 @@
   minuteInterval?: number,
+  accessibilityLabel?: string,
 |}>;

src/utils.js

@@ -33,3 +33,11 @@ /**
 
-export function sharedPropsValidation({value}: {value: ?Date}) {
+export function sharedPropsValidation({
+  value,
+  timeZoneName,
+  timeZoneOffsetInMinutes,
+}: {
+  value: Date,
+  timeZoneName?: ?string,
+  timeZoneOffsetInMinutes?: ?number,
+}) {
   invariant(value, 'A date or time must be specified as `value` prop');
@@ -40,2 +48,11 @@ invariant(
   );
+  invariant(
+    timeZoneName == null || timeZoneOffsetInMinutes == null,
+    '`timeZoneName` and `timeZoneOffsetInMinutes` cannot be specified at the same time',
+  );
+  if (timeZoneOffsetInMinutes !== undefined) {
+    console.warn(
+      '`timeZoneOffsetInMinutes` is deprecated and will be removed in a future release. Use `timeZoneName` instead.',
+    );
+  }
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

218212

increased by3.37%

Number of package files

84

increased by1.2%

Lines of code

1323

increased by2.64%

Number of lines in readme file

582

increased by3.56%

Worsened metrics

Dev dependency count

25

increased by4.17%

No dependency changes