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

Comparing version 7.4.2 to 7.5.0

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.4.2",
+  "version": "7.5.0",
   "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)
@@ -313,2 +314,4 @@ - [`timeZoneOffsetInSeconds` (`optional`, `Windows only`)](#timezoneoffsetinsecond-optional-windows-only)
 
+The `utcOffset` field is only available on Android and iOS. It is the offset in minutes between the selected date and UTC time.
+
 ```js
@@ -318,3 +321,3 @@ const setDate = (event: DateTimePickerEvent, date: Date) => {
     type,
-    nativeEvent: {timestamp},
+    nativeEvent: {timestamp, utcOffset},
   } = event;
@@ -350,7 +353,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
@@ -357,0 +371,0 @@ // GMT+1

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,3 @@ import type {AndroidNativeProps, DateTimePickerResult} from './types';
   timeZoneOffsetInMinutes: AndroidNativeProps['timeZoneOffsetInMinutes'],
+  timeZoneName: AndroidNativeProps['timeZoneName'],
   testID: AndroidNativeProps['testID'],
@@ -51,2 +52,3 @@ dialogButtons: {
         timeZoneOffsetInMinutes,
+        timeZoneName,
         dialogButtons,
@@ -61,2 +63,3 @@ }: OpenParams) =>
           timeZoneOffsetInMinutes,
+          timeZoneName,
           dialogButtons,
@@ -71,2 +74,3 @@ });
         timeZoneOffsetInMinutes,
+        timeZoneName,
         dialogButtons,
@@ -82,2 +86,3 @@ testID,
           timeZoneOffsetInMinutes,
+          timeZoneName,
           dialogButtons,
@@ -89,16 +94,2 @@ testID,
 
-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) {
@@ -123,2 +114,2 @@ sharedPropsValidation({value: props?.value});
 }
-export {getOpenPicker, timeZoneOffsetDateSetter, validateAndroidProps};
+export {getOpenPicker, validateAndroidProps};

src/datetimepicker.android.js

@@ -27,2 +27,3 @@ /**
     timeZoneOffsetInMinutes,
+    timeZoneName,
     positiveButton,
@@ -55,2 +56,3 @@ negativeButton,
         timeZoneOffsetInMinutes,
+        timeZoneName,
         onError,
@@ -57,0 +59,0 @@ onChange,

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

@@ -57,3 +57,7 @@ /**
       ...event,
-      nativeEvent: {...event.nativeEvent, timestamp: event.nativeEvent.newDate},
+      nativeEvent: {
+        ...event.nativeEvent,
+        timestamp: event.nativeEvent.newDate,
+        utcOffset: 0,
+      },
       type: EVENT_TYPE_SET,
@@ -60,0 +64,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,
@@ -81,3 +78,3 @@ onError,
           : ANDROID_DISPLAY.default;
-      const {action, day, month, year, minute, hour} = await openPicker({
+      const {action, timestamp, utcOffset} = await openPicker({
         value: valueTimestamp,
@@ -90,2 +87,3 @@ display: displayOverride,
         timeZoneOffsetInMinutes,
+        timeZoneName,
         dialogButtons,
@@ -96,16 +94,6 @@ 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);
@@ -116,3 +104,3 @@ break;
         case NEUTRAL_BUTTON_ACTION: {
-          const [event] = createNeutralEvtParams(originalValue);
+          const [event] = createNeutralEvtParams(originalValue, utcOffset);
           onChange?.(event, originalValue);
@@ -123,3 +111,3 @@ break;
         default: {
-          const [event] = createDismissEvtParams(originalValue);
+          const [event] = createDismissEvtParams(originalValue, utcOffset);
           onChange?.(event, originalValue);
@@ -126,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;
+    }
+>;
 
@@ -70,0 +79,0 @@ export type IOSNativeProps = Readonly<

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/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,
 |}>;
@@ -225,0 +232,0 @@

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

212426

increased by0.45%

Lines of code

1320

increased by1.77%

Number of lines in readme file

582

increased by2.46%

Worsened metrics

Dev dependency count

25

increased by4.17%

Number of package files

82

decreased by-1.2%

No dependency changes