From c0ddf5cb6cbf425c1903c8bf0c495595165bbce7 Mon Sep 17 00:00:00 2001
From: Henning Hall <henning.hall@hotmail.com>
Date: Fri, 5 Oct 2018 20:27:56 +0200
Subject: [PATCH 1/3] Added property timeZoneOffsetInMinutes

---
 DatePickerAndroid.js | 26 ++++++++++++++++++--------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/DatePickerAndroid.js b/DatePickerAndroid.js
index 8794125..8d31322 100644
--- a/DatePickerAndroid.js
+++ b/DatePickerAndroid.js
@@ -5,26 +5,36 @@ const NativeDatePicker = requireNativeComponent(`DatePickerManager`, DatePickerA
 
 class DatePickerAndroid extends React.Component {
 
-    static defaultProps = { 
+    static defaultProps = {
         mode: 'datetime',
         minuteInterval: 1,
-     };
-  
-    _onChange = e => this.props.onDateChange(new Date(parseInt(e.nativeEvent.date)));
-    _maximumDate = () => this.props.maximumDate && this.props.maximumDate.getTime();
-    _minimumDate = () => this.props.minimumDate && this.props.minimumDate.getTime();
+    };
+
     render = () => (
         <NativeDatePicker
-            {...this.props }
-            date={this.props.date.getTime()}
+            {...this.props}
+            date={this._date()}
             minimumDate={this._minimumDate()}
             maximumDate={this._maximumDate()}
             onChange={this._onChange}
             style={[styles.picker, this.props.style]}
         />
     )
+
+    _onChange = e => this.props.onDateChange(new Date(parseInt(e.nativeEvent.date + this._getOffsetMillis())));
+    _maximumDate = () => this._toUnixMillisWithTimeZoneOffset(this.props.maximumDate);
+    _minimumDate = () => this._toUnixMillisWithTimeZoneOffset(this.props.minimumDate);
+    _date = () => this._toUnixMillisWithTimeZoneOffset(this.props.date);
+    _toUnixMillisWithTimeZoneOffset = date => date && this._toUnixMillis(date) - this._getOffsetMillis();
+    _toUnixMillis = date => date.getTime()
+
+    _getOffsetMillis = () => this.props.timeZoneOffsetInMinutes === undefined ? 0
+        : -toMs(this.props.timeZoneOffsetInMinutes + new Date().getTimezoneOffset())
+
 }
 
+const toMs = minutes => minutes * 60 * 1000
+
 const styles = StyleSheet.create({
     picker: {
         width: 310,

From b440e41c172cfdd9f500f60ab4289f67bf2fc13a Mon Sep 17 00:00:00 2001
From: Henning Hall <henning.hall@hotmail.com>
Date: Fri, 5 Oct 2018 20:28:42 +0200
Subject: [PATCH 2/3] Updated example with timezoneOffsetInMinutes

---
 example/src/PropButton.js                       |  4 ++++
 example/src/examples/Advanced.js                |  7 +++++++
 example/src/propPickers/MinMaxDateChange.js     |  4 +---
 .../src/propPickers/TimeZoneOffsetInMinutes.js  | 17 +++++++++++++++++
 4 files changed, 29 insertions(+), 3 deletions(-)
 create mode 100644 example/src/PropButton.js
 create mode 100644 example/src/propPickers/TimeZoneOffsetInMinutes.js

diff --git a/example/src/PropButton.js b/example/src/PropButton.js
new file mode 100644
index 0000000..67bf92c
--- /dev/null
+++ b/example/src/PropButton.js
@@ -0,0 +1,4 @@
+import React, { Component } from 'react';
+import { Button } from 'react-native';
+
+export const PropButton = ({ title, value, onChange }) => <Button title={title} onPress={() => onChange(value)} />
diff --git a/example/src/examples/Advanced.js b/example/src/examples/Advanced.js
index 82ac18a..3b9fdec 100644
--- a/example/src/examples/Advanced.js
+++ b/example/src/examples/Advanced.js
@@ -8,6 +8,7 @@ import LocalePicker from '../propPickers/LocalePicker';
 import MinMaxDateChange from '../propPickers/MinMaxDateChange';
 import ModePicker from '../propPickers/ModePicker';
 import TextColor from '../propPickers/TextColor';
+import TimeZoneOffsetInMinutes from '../propPickers/TimeZoneOffsetInMinutes';
 import PropSlider from '../PropSlider';
 
 Date.prototype.addHours = function (h) {
@@ -31,6 +32,7 @@ export default class Advanced extends Component {
     mode: 'datetime',
     minDate: defaultMinDate,
     maxDate: defaultMaxDate,
+    timeZoneOffsetInMinutes: undefined,
   }
 
   render() {
@@ -46,6 +48,7 @@ export default class Advanced extends Component {
           fadeToColor={this.props.backgroundColor}
           textColor={this.state.textColor}
           mode={this.state.mode}
+          timeZoneOffsetInMinutes={this.state.timeZoneOffsetInMinutes}
         />
         <Text>Picker date: {readableDate(this.state.chosenDate)}</Text>
         <Text />
@@ -71,6 +74,10 @@ export default class Advanced extends Component {
       name: 'locale', component:
         <LocalePicker locale={this.state.locale} onChange={locale => this.setState({ locale })} />
     },
+    {
+      name: 'timeZoneOffset', component:
+        <TimeZoneOffsetInMinutes onChange={timeZoneOffsetInMinutes => this.setState({ timeZoneOffsetInMinutes })} />
+    },
     {
       name: 'date', component:
         <DateChange value={this.state.chosenDate} onChange={chosenDate => this.setState({ chosenDate })} />
diff --git a/example/src/propPickers/MinMaxDateChange.js b/example/src/propPickers/MinMaxDateChange.js
index 099ccbb..f3b952f 100644
--- a/example/src/propPickers/MinMaxDateChange.js
+++ b/example/src/propPickers/MinMaxDateChange.js
@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import { Text, Button, View, StyleSheet } from 'react-native';
 import { readableDate } from '../examples/Advanced'
+import { PropButton } from '../PropButton';
 
 export default class extends Component {
 
@@ -30,9 +31,6 @@ export default class extends Component {
 
 }
 
-
-const PropButton = ({ title, value, onChange }) => <Button title={title} onPress={() => onChange(value)} />
-
 const styles = StyleSheet.create({
     row: {
         flexDirection: 'row',
diff --git a/example/src/propPickers/TimeZoneOffsetInMinutes.js b/example/src/propPickers/TimeZoneOffsetInMinutes.js
new file mode 100644
index 0000000..2e00506
--- /dev/null
+++ b/example/src/propPickers/TimeZoneOffsetInMinutes.js
@@ -0,0 +1,17 @@
+import React, { Component } from 'react';
+import { PropButton } from '../PropButton';
+
+export default class extends Component {
+
+    render() {
+        const {onChange} = this.props
+        return (
+            <React.Fragment>
+                <PropButton title='Set undefined' value={undefined} onChange={onChange} />
+                <PropButton title='Set 0' value={0} onChange={onChange} />
+                <PropButton title='Set 180' value={180} onChange={onChange} />
+                <PropButton title='Set -180' value={-180} onChange={onChange} />
+            </React.Fragment>
+        );
+    }
+}
\ No newline at end of file

From 369d6cafe9929253fb2cc4e27e11cd77b3c8f41c Mon Sep 17 00:00:00 2001
From: Henning Hall <henning.hall@hotmail.com>
Date: Fri, 5 Oct 2018 20:34:15 +0200
Subject: [PATCH 3/3] Updated readme with timeZoneOffsetInMinutes

---
 README.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/README.md b/README.md
index d3fcd8b..3418ccb 100644
--- a/README.md
+++ b/README.md
@@ -68,6 +68,8 @@ minuteInterval | The interval at which minutes can be selected. | <img src="docs
 mode | The date picker mode. {'datetime', 'date', 'time'} | <img src="docs/datetime-mode-ios.png" alt="Datetime mode ios" height="120px" /><img src="docs/date-mode-ios.png" alt="date mode ios" height="120px" /><img src="docs/time-mode-ios.png" alt="time mode ios" height="120px" />|<img src="docs/date-mode-android.png" alt="date mode android" height="120px" /><img src="docs/datetime-mode-android.png" alt="datetime mode android" height="120px" /><img src="docs/time-mode-android.png" alt="time mode android" height="120px" /> |
 locale | The locale for the date picker. Changes language, date order and am/pm preferences. Value needs to be a <a title="react native datepicker locale id" href="https://developer.apple.com/library/content/documentation/MacOSX/Conceptual/BPInternational/LanguageandLocaleIDs/LanguageandLocaleIDs.html">Locale ID.</a>| <img src="docs/locale-ios.png" alt="React Native Date picker locale language ios" height="120px" />|<img src="docs/locale-android.png" alt="React Native Date picker locale language android" height="120px" />
 textColor | Changes the text color. | <img src="docs/colors-ios.png" alt="text color background color ios" height="120px" />|<img src="docs/colors-android.png" alt="Text color background color android" height="120px" />
+timeZoneOffsetInMinutes | Timezone offset in minutes (default: device's timezone)
+ | 
 
 ## About
 📅 &nbsp; React Native Date Picker is a cross platform component working on both iOS and Android. It uses the slightly improved DatePickerIOS on iOS and a custom picker on Android which has similar look and feel. The datetime mode might be particulary interesting if you looking for a way to avoid two different popup pickers on android.