store and recreate moment with the appropriate timezone

Author: hawkrives

source/views/components/datepicker/index.js

@@ -30,6 +30,7 @@ type Props = {
 
 type State = {
   date: moment,
+  timezone: string,
 }
 
 export class DatePicker extends React.Component<any, Props, State> {
@@ -43,15 +44,22 @@ export class DatePicker extends React.Component<any, Props, State> {
 
   state = {
     date: this.props.initialDate,
+    timezone: this.props.initialDate.tz(),
   }
 
   componentWillMount() {
-    this.setState(() => ({date: this.props.initialDate}))
+    this.setState(() => ({
+      date: this.props.initialDate,
+      timezone: this.props.initialDate.tz(),
+    }))
   }
 
   componentWillReceiveProps(nextProps: Props) {
     if (nextProps.initialDate !== this.props.initialDate) {
-      this.setState(() => ({date: nextProps.initialDate}))
+      this.setState(() => ({
+        date: nextProps.initialDate,
+        timezone: nextProps.initialDate.tz(),
+      }))
     }
   }
 
@@ -90,6 +98,7 @@ export class DatePicker extends React.Component<any, Props, State> {
           duration={this.props.duration}
           height={this.props.height}
           minuteInterval={this.props.minuteInterval}
+          timezone={this.state.timezone}
           {...propsToPass}
         />
       )

source/views/components/datepicker/ios.js

@@ -25,6 +25,7 @@ type Props = {
   mode: 'date' | 'datetime' | 'time',
   onDateChange: moment => any,
   style?: StyleSheetRules,
+  timezone: string,
 }
 
 type State = {
@@ -68,7 +69,7 @@ export class IosDatePicker extends React.Component<any, Props, State> {
   onDateChange = (date: Date) => {
     this.setState(() => ({allowPointerEvents: false}))
 
-    this.props.onDateChange(moment(date))
+    this.props.onDateChange(moment.tz(date, this.props.timezone))
 
     const timeoutId = setTimeout(() => {
       this.setState(() => ({allowPointerEvents: true}))
@@ -104,6 +105,7 @@ export class IosDatePicker extends React.Component<any, Props, State> {
             onDateChange={this.onDateChange}
             onHide={this.hideModal}
             visible={this.state.modalVisible}
+            timezone={this.props.timezone}
           />
         </View>
       </TouchableHighlight>
@@ -120,6 +122,7 @@ type ModalProps = {
   visible: boolean,
   onDateChange: moment => any,
   onHide: () => any,
+  timezone: string,
 }
 
 class DatePickerModal extends React.PureComponent<void, ModalProps, void> {
@@ -141,15 +144,15 @@ class DatePickerModal extends React.PureComponent<void, ModalProps, void> {
       onDateChange,
       onHide,
       visible,
+      timezone,
     } = this.props
 
     let tzOffset = 0
     if (date.tz()) {
       // We need to negate the offset, because moment inverts the offset for
       // POSIX compatability. So, GMT-5 (CST) is shown to be GMT+5.
       const dateInUnixMs = date.valueOf()
-      const tzName = date.tz()
-      tzOffset = -moment.tz.zone(tzName).offset(dateInUnixMs)
+      tzOffset = -moment.tz.zone(timezone).offset(dateInUnixMs)
     }
 
     return (