feat: support timeZoneOffsetInMinutes for date mode on android (#407)

* Fix for adding Android timeoffset

* Fixd

* Fixed the bad constant

* new

* Added mode data timeZoneOffsetInMinutes

* New

* New function timeZoneOffsetDateSetter

* new semi

* new local

* New

* new

* Moved order

* new

* New

* new

* new

* new

* New

* update

* Upgraded detox 16.9.2

* New

Co-authored-by: bbell <[email protected]>

Author: billnbell

README.md

@@ -13,7 +13,7 @@ The module is still published on `npm` under the old namespace (as documented) b
 [![Lean Core Badge][lean-core-badge]][lean-core-issue]
 
 React Native date & time picker component for iOS, Android and Windows.
-
+ 
 <table>
   <tr><td colspan=2><strong>iOS</strong></td></tr>
   <tr>
@@ -52,7 +52,7 @@ React Native date & time picker component for iOS, Android and Windows.
     - [`value` (`required`)](#value-required)
     - [`maximumDate` (`optional`)](#maximumdate-optional)
     - [`minimumDate` (`optional`)](#minimumdate-optional)
-    - [`timeZoneOffsetInMinutes` (`optional`, `iOS or Android only`)](#timezoneoffsetinminutes-optional-ios-only)
+    - [`timeZoneOffsetInMinutes` (`optional`, `iOS or Android only`)](#timezoneoffsetinminutes-optional-ios-and-android-only)
     - [`timeZoneOffsetInSeconds` (`optional`, `Windows only`)](#timezoneoffsetinsecond-optional-windows-only)
     - [`dayOfWeekFormat` (`optional`, `Windows only`)](#dayOfWeekFormat-optional-windows-only)
     - [`dateFormat` (`optional`, `Windows only`)](#dateFormat-optional-windows-only)

android/src/main/java/com/reactcommunity/rndatetimepicker/RNConstants.java

@@ -9,7 +9,7 @@ public final class RNConstants {
   public static final String ARG_IS24HOUR = "is24Hour";
   public static final String ARG_DISPLAY = "display";
   public static final String ARG_NEUTRAL_BUTTON_LABEL = "neutralButtonLabel";
-  public static final String ARG_TZOFFSET_MIN = "timeZoneOffsetInMinutes";
+  public static final String ARG_TZOFFSET_MINS = "timeZoneOffsetInMinutes";
   public static final String ACTION_DATE_SET = "dateSetAction";
   public static final String ACTION_TIME_SET = "timeSetAction";
   public static final String ACTION_DISMISSED = "dismissedAction";

android/src/main/java/com/reactcommunity/rndatetimepicker/RNDate.java

@@ -9,9 +9,9 @@ public class RNDate {
 
   public RNDate(Bundle args) {
     now = Calendar.getInstance();
-    if (args != null && args.containsKey(RNConstants.ARG_TZOFFSET_MIN)) {
+    if (args != null && args.containsKey(RNConstants.ARG_TZOFFSET_MINS)) {
       now.setTimeZone(TimeZone.getTimeZone("GMT"));
-      Integer timeZoneOffsetInMinutes = args.getInt(RNConstants.ARG_TZOFFSET_MIN);
+      Integer timeZoneOffsetInMinutes = args.getInt(RNConstants.ARG_TZOFFSET_MINS);
       now.add(Calendar.MILLISECOND, timeZoneOffsetInMinutes * 60000);
     }
 

android/src/main/java/com/reactcommunity/rndatetimepicker/RNDatePickerDialogModule.java

@@ -171,6 +171,9 @@ private Bundle createFragmentArguments(ReadableMap options) {
     if (options.hasKey(RNConstants.ARG_NEUTRAL_BUTTON_LABEL) && !options.isNull(RNConstants.ARG_NEUTRAL_BUTTON_LABEL)) {
       args.putString(RNConstants.ARG_NEUTRAL_BUTTON_LABEL, options.getString(RNConstants.ARG_NEUTRAL_BUTTON_LABEL));
     }
+    if (options.hasKey(RNConstants.ARG_TZOFFSET_MINS) && !options.isNull(RNConstants.ARG_TZOFFSET_MINS)) {
+      args.putLong(RNConstants.ARG_TZOFFSET_MINS, (long) options.getDouble(RNConstants.ARG_TZOFFSET_MINS));
+    }
     return args;
   }
 }

android/src/main/java/com/reactcommunity/rndatetimepicker/RNTimePickerDialogModule.java

@@ -148,8 +148,8 @@ private Bundle createFragmentArguments(ReadableMap options) {
     if (options.hasKey(RNConstants.ARG_INTERVAL) && !options.isNull(RNConstants.ARG_INTERVAL)) {
       args.putInt(RNConstants.ARG_INTERVAL, options.getInt(RNConstants.ARG_INTERVAL));
     }
-    if (options.hasKey(RNConstants.ARG_TZOFFSET_MIN) && !options.isNull(RNConstants.ARG_TZOFFSET_MIN)) {
-      args.putInt(RNConstants.ARG_TZOFFSET_MIN, options.getInt(RNConstants.ARG_TZOFFSET_MIN));
+    if (options.hasKey(RNConstants.ARG_TZOFFSET_MINS) && !options.isNull(RNConstants.ARG_TZOFFSET_MINS)) {
+      args.putInt(RNConstants.ARG_TZOFFSET_MINS, options.getInt(RNConstants.ARG_TZOFFSET_MINS));
     }
     return args;
   }

example/App.js

@@ -224,14 +224,24 @@ export const App = () => {
                 title="hide picker"
               />
             </View>
+            <View style={styles.button}>
+              <Button
+                testID="setTzZero"
+                onPress={() => {
+                  setTzOffsetInMinutes(0);
+                  setShow(true);
+                }}
+                title="setTzOffsetInMinutes to 0"
+              />
+            </View>
             <View style={styles.button}>
               <Button
                 testID="setTz"
                 onPress={() => {
                   setTzOffsetInMinutes(60);
                   setShow(true);
                 }}
-                title="setTz"
+                title="setTzOffsetInMinutes to 60"
               />
             </View>
             {show && (

example/e2e/detoxTest.spec.js

@@ -130,17 +130,47 @@ describe('Example', () => {
     }
   });
 
-  async function userOpensPickerTz({mode, display, interval}) {
+  async function userOpensPickerSetTimeZoneOffset({
+    mode,
+    display,
+    interval,
+    type,
+  }) {
     await element(by.text(mode)).tap();
     await element(by.text(display)).tap();
     if (interval) {
       await element(by.text(String(interval))).tap();
     }
-    await element(by.id('setTz')).tap();
+    await element(by.id(type)).tap();
   }
 
-  it('setTz should change time text when time changes 60 minutes', async () => {
-    await userOpensPickerTz({mode: 'time', display: 'default'});
+  it('should update dateTimeText when date changes and set setTzOffsetInMinutes to 0', async () => {
+    await userOpensPickerSetTimeZoneOffset({
+      mode: 'date',
+      display: 'default',
+      type: 'setTzZero',
+    });
+    const dateText = getDateText();
+
+    if (isIOS()) {
+      const testElement = getDateTimePickerIOS();
+      await testElement.setColumnToValue(0, 'November');
+      await testElement.setColumnToValue(1, '3');
+      await testElement.setColumnToValue(2, '1800');
+
+      await expect(dateText).toHaveText('11/03/1800');
+    } else {
+      await userTapsOkButtonAndroid();
+      await expect(dateText).toHaveText('08/21/2020');
+    }
+  });
+
+  it('setTz should change time text when setTzOffsetInMinutes is 60 minutes', async () => {
+    await userOpensPickerSetTimeZoneOffset({
+      mode: 'time',
+      display: 'default',
+      type: 'setTz',
+    });
     const timeText = getTimeText();
 
     if (isIOS()) {

package.json

@@ -67,7 +67,7 @@
     "@semantic-release/git": "^9.0.0",
     "@testing-library/react-native": "^7.0.1",
     "babel-jest": "^26.0.1",
-    "detox": "^16.5.1",
+    "detox": "16.9.2",
     "eslint": "^7.6.0",
     "eslint-plugin-prettier": "^3.1.2",
     "flow-bin": "^0.113.0",

src/datetimepicker.android.js

@@ -59,10 +59,24 @@ function getPicker({
         minimumDate,
         maximumDate,
         neutralButtonLabel,
+        timeZoneOffsetInMinutes,
       });
   }
 }
 
+function timeZoneOffsetDateSetter(date, timeZoneOffsetInMinutes) {
+  let localDate = date;
+  if (
+    typeof timeZoneOffsetInMinutes !== 'undefined' &&
+    timeZoneOffsetInMinutes >= 0
+  ) {
+    const offset =
+      localDate.getTimezoneOffset() * MIN_MS + timeZoneOffsetInMinutes * MIN_MS;
+    localDate = new Date(date.getTime() - offset);
+  }
+  return localDate;
+}
+
 export default function RNDateTimePicker(props: AndroidNativeProps) {
   validateProps(props);
   const {
@@ -109,18 +123,16 @@ export default function RNDateTimePicker(props: AndroidNativeProps) {
 
           switch (action) {
             case DATE_SET_ACTION:
-              event.nativeEvent.timestamp = date.setFullYear(year, month, day);
+              date.setFullYear(year, month, day);
+              date.setHours(0, 0);
+              date = timeZoneOffsetDateSetter(date, timeZoneOffsetInMinutes);
+              event.nativeEvent.timestamp = date;
               onChange(event, date);
               break;
 
             case TIME_SET_ACTION:
               date.setHours(hour, minute);
-              if (timeZoneOffsetInMinutes !== undefined) {
-                const offset =
-                  date.getTimezoneOffset() * MIN_MS +
-                  timeZoneOffsetInMinutes * MIN_MS;
-                date = new Date(date.getTime() - offset);
-              }
+              date = timeZoneOffsetDateSetter(date, timeZoneOffsetInMinutes);
               event.nativeEvent.timestamp = date;
               onChange(event, date);
               break;

yarn.lock

@@ -3363,7 +3363,7 @@ detect-newline@^3.0.0:
   resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-3.1.0.tgz#576f5dfc63ae1a192ff192d8ad3af6308991b651"
   integrity sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==
 
-detox@^16.5.1:
+detox@16.9.2:
   version "16.9.2"
   resolved "https://registry.yarnpkg.com/detox/-/detox-16.9.2.tgz#3b99be3df54ef0f35ffe12d3aa87b556d00a50d3"
   integrity sha512-yi74zL3hHFRU131B5tgZiYh0hPWvpryntllAKEpxRGRRuz+11s2+TjpuS0M02jGOdDMFBk5BzcXFGM57FWbWNA==