Merge branch 'display-time-zone' of https://github.com/custora/react-datetime into custora-display-time-zone

Author: arqex

DateTime.d.ts

@@ -76,6 +76,11 @@ declare namespace ReactDatetimeClass {
          Whether to interpret input times as UTC or the user's local timezone.
          */
         utc?: boolean;
+        /*
+         When specified, input time values will be displayed in the given time zone. Otherwise they will default
+         to the user's local timezone (unless `utc` specified).
+         */
+        displayTimeZone?: string;
         /*
          Callback trigger when the date changes. The callback receives the selected `moment` object as
          only parameter, if the date in the input is valid. If the date in the input is not valid, the

DateTime.js

@@ -30,6 +30,7 @@ var Datetime = createClass({
 		onNavigateForward: TYPES.func,
 		locale: TYPES.string,
 		utc: TYPES.bool,
+		displayTimeZone: TYPES.string,
 		input: TYPES.bool,
 		// dateFormat: TYPES.string | TYPES.bool,
 		// timeFormat: TYPES.string | TYPES.bool,
@@ -177,14 +178,21 @@ var Datetime = createClass({
 			}
 		}
 
-		if ( nextProps.utc !== this.props.utc ) {
+		if ( nextProps.utc !== this.props.utc || nextProps.displayTimeZone !== this.props.displayTimeZone ) {
 			if ( nextProps.utc ) {
 				if ( this.state.viewDate )
 					updatedState.viewDate = this.state.viewDate.clone().utc();
 				if ( this.state.selectedDate ) {
 					updatedState.selectedDate = this.state.selectedDate.clone().utc();
 					updatedState.inputValue = updatedState.selectedDate.format( formats.datetime );
 				}
+			} else if ( nextProps.displayTimeZone ) {
+				if ( this.state.viewDate )
+					updatedState.viewDate = this.state.viewDate.clone().tz(nextProps.displayTimeZone);
+				if ( this.state.selectedDate ) {
+					updatedState.selectedDate = this.state.selectedDate.clone().tz(nextProps.displayTimeZone);
+					updatedState.inputValue = updatedState.selectedDate.tz(nextProps.displayTimeZone).format( formats.datetime );
+				}
 			} else {
 				if ( this.state.viewDate )
 					updatedState.viewDate = this.state.viewDate.clone().local();
@@ -384,8 +392,16 @@ var Datetime = createClass({
 
 	localMoment: function( date, format, props ) {
 		props = props || this.props;
-		var momentFn = props.utc ? moment.utc : moment;
-		var m = momentFn( date, format, props.strictParsing );
+		var m = null;
+
+		if (props.utc) {
+			m = moment.utc(date, format, props.strictParsing);
+		} else if (props.displayTimeZone) {
+			m = moment.tz(date, format, props.displayTimeZone);
+		} else {
+			m = moment(date, format, props.strictParsing);
+		}
+
 		if ( props.locale )
 			m.locale( props.locale );
 		return m;
@@ -420,8 +436,8 @@ var Datetime = createClass({
 		// TODO: Make a function or clean up this code,
 		// logic right now is really hard to follow
 		var className = 'rdt' + (this.props.className ?
-                  ( Array.isArray( this.props.className ) ?
-                  ' ' + this.props.className.join( ' ' ) : ' ' + this.props.className) : ''),
+									( Array.isArray( this.props.className ) ?
+									' ' + this.props.className.join( ' ' ) : ' ' + this.props.className) : ''),
 			children = [];
 
 		if ( this.props.input ) {

README.md

@@ -50,6 +50,7 @@ render: function() {
 | **open** | `boolean` | `null` | Whether to open or close the picker. If not set react-datetime will open the datepicker on input focus and close it on click outside. |
 | **locale** | `string` | `null` | Manually set the locale for the react-datetime instance. Moment.js locale needs to be loaded to be used, see [i18n docs](#i18n).
 | **utc** | `boolean` | `false` | When true, input time values will be interpreted as UTC (Zulu time) by Moment.js. Otherwise they will default to the user's local timezone.
+| **displayTImeZone** | `string` | `null` | When specified, input time values will be displayed in the given time zone. Otherwise they will default to the user's local timezone (unless `utc` specified).
 | **onChange** | `function` | empty function | Callback trigger when the date changes. The callback receives the selected `moment` object as only parameter, if the date in the input is valid. If the date in the input is not valid, the callback receives the value of the input (a string). |
 | **onFocus** | `function` | empty function | Callback trigger for when the user opens the datepicker. The callback receives an event of type SyntheticEvent. |
 | **onBlur** | `function` | empty function | Callback trigger for when the user clicks outside of the input, simulating a regular onBlur. The callback receives the selected `moment` object as only parameter, if the date in the input is valid. If the date in the input is not valid, the callback returned. |

package.json

@@ -41,6 +41,7 @@
   "license": "MIT",
   "peerDependencies": {
     "moment": ">=2.16.0",
+    "moment-timezone": "^0.5.13",
     "react": ">=0.13",
     "react-dom": ">=0.13"
   },
@@ -67,6 +68,7 @@
     "jsdom": "^7.0.2",
     "mocha": "^3.2.0",
     "moment": ">=2.16.0",
+    "moment-timezone": "^0.5.13",
     "pre-commit": "^1.1.3",
     "react": "^15.5.0",
     "react-addons-test-utils": ">=0.13",

react-datetime.d.ts

@@ -57,6 +57,11 @@ declare module ReactDatetime {
      Whether to interpret input times as UTC or the user's local timezone.
      */
     utc?: boolean;
+    /*
+     When specified, input time values will be displayed in the given time zone. Otherwise they will default
+     to the user's local timezone (unless `utc` specified).
+     */
+    displayTimeZone?: string;
     /*
      Callback trigger when the date changes. The callback receives the selected `moment` object as
      only parameter, if the date in the input is valid. If the date in the input is not valid, the

test/tests.spec.js

@@ -2,6 +2,7 @@
 
 import React from 'react'; // eslint-disable-line no-unused-vars
 import moment from 'moment';
+import _momentTimezone from 'moment-timezone'; // eslint-disable-line no-unused-vars
 import utils from './testUtils';
 import Enzyme from 'enzyme';
 import Adapter from 'enzyme-adapter-react-15';
@@ -877,6 +878,34 @@ describe('Datetime', () => {
 				});
 			});
 
+			it('displayTimeZone -> value should change format (undefined->America/New_York)', () => {
+				const date = new Date(2000, 0, 15, 2, 2, 2, 2),
+					momentDate = moment(date),
+					component = utils.createDatetime({ value: momentDate }),
+					displayTimeZone = (moment.tz.guess() === 'America/New_York' ? 'America/Los_Angeles' : 'America/New_York');
+
+				const valueBefore = utils.getInputValue(component);
+				component.setProps({ displayTimeZone: displayTimeZone }, () => {
+					const valueAfter = utils.getInputValue(component);
+
+					expect(valueBefore).not.toEqual(valueAfter);
+				});
+			});
+
+			it('displayTimeZone -> value should change format (America/New_York->undefined)', () => {
+				const date = new Date(2000, 0, 15, 2, 2, 2, 2),
+					momentDate = moment(date),
+					displayTimeZone = (moment.tz.guess() === 'America/New_York' ? 'America/Los_Angeles' : 'America/New_York'),
+					component = utils.createDatetime({ value: momentDate, displayTimeZone: displayTimeZone });
+
+				const valueBefore = utils.getInputValue(component);
+				component.setProps({ displayTimeZone: undefined }, () => {
+					const valueAfter = utils.getInputValue(component);
+
+					expect(valueBefore).not.toEqual(valueAfter);
+				});
+			});
+
 			it('locale -> picker should change language (viewMode=days)', () => {
 				const component = utils.createDatetime({ viewMode: 'days', locale: 'nl' }),
 					weekdaysBefore = component.find('.rdtDays .dow').map((element) =>
@@ -1195,6 +1224,26 @@ describe('Datetime', () => {
 			expect(utils.getInputValue(component)).toEqual(strDateUTC);
 		});
 
+		it('TZ value from local moment', () => {
+			const date = new Date(2000, 0, 15, 2, 2, 2, 2),
+        displayTimeZone = 'America/New_York',
+				momentDate = moment(date),
+				momentDateTZ = moment.tz(date, displayTimeZone),
+				strDateTZ = momentDateTZ.format('L') + ' ' + momentDateTZ.format('LT'),
+				component = utils.createDatetime({ value: momentDate, displayTimeZone: displayTimeZone });
+			expect(utils.getInputValue(component)).toEqual(strDateTZ);
+		});
+
+		it('TZ value from UTC moment', () => {
+			const date = new Date(2000, 0, 15, 2, 2, 2, 2),
+				displayTimeZone = 'America/New_York',
+				momentDateUTC = moment.utc(date),
+				momentDateTZ = moment.tz(date, displayTimeZone),
+				strDateTZ = momentDateTZ.format('L') + ' ' + momentDateTZ.format('LT'),
+				component = utils.createDatetime({ value: momentDateUTC, displayTimeZone: displayTimeZone });
+			expect(utils.getInputValue(component)).toEqual(strDateTZ);
+		});
+
 		it('invalid string value', (done) => {
 			const date = new Date(2000, 0, 15, 2, 2, 2, 2),
 				mDate = moment(date),