Merge pull request #20 from henninghall/feature/timeZoneOffset

Added property timeZoneOffsetInMinutes

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,

README.md

@@ -68,6 +68,8 @@ minuteInterval | The interval at which minutes can be selected. |
 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. 

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)} />

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 })} />

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',

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>
+        );
+    }
+}