formatjs · sourabh2k15 · Sep 10, 2018 · Oct 26, 2016 · Oct 26, 2016 · Oct 26, 2016
diff --git a/examples/explicit-timezone/.gitignore b/examples/explicit-timezone/.gitignore
@@ -0,0 +1,15 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+node_modules
+
+# testing
+coverage
+
+# production
+build
+
+# misc
+.DS_Store
+.env
+npm-debug.log
diff --git a/examples/explicit-timezone/README.md b/examples/explicit-timezone/README.md
@@ -0,0 +1,13 @@
+React Intl Explicit Timezone Example
+==============================
+
+This app demonstrates the ability to explicitly pass a timeZone to IntlProvider so that times and dates are formatted accordingly
+
+## Running Example
+
+**In the project directory, run:**
+```
+$ npm install
+$ npm start
+```
+**Open [http://localhost:3000](http://localhost:3000) to view it in the browser.**
diff --git a/examples/explicit-timezone/package.json b/examples/explicit-timezone/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "react-intl-example-explicit-timezone",
+  "version": "1.0.0",
+  "description": "React Intl Explicit Timezone Example",
+  "private": true,
+  "main": "index.js",
+  "author": "Bryan Richards <brichardssa@gmail.com>",
+  "license": "BSD-3-Clause",
+  "devDependencies": {
+    "react-scripts": "0.6.0"
+  },
+  "dependencies": {
+    "prop-types": "^15.5.4",
+    "react": "^15.5.4",
+    "react-dom": "^15.5.4",
+    "react-intl": "^2.3.0"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build"
+  }
+}
diff --git a/examples/explicit-timezone/public/index.html b/examples/explicit-timezone/public/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <title>React Intl Explicit Timezone Example</title>
+    </head>
+    <body>
+        <div id="root"></div>
+        <script src="https://cdn.polyfill.io/v1/polyfill.min.js?features=Intl.~locale.en"></script>
+    </body>
+</html>
diff --git a/examples/explicit-timezone/src/App.js b/examples/explicit-timezone/src/App.js
@@ -0,0 +1,25 @@
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+import {FormattedDate, FormattedTime} from 'react-intl';
+
+class App extends Component {
+    render() {
+        const {currentTime} = this.props;
+
+        return <p>
+            The date in Tokyo is: <FormattedDate value={currentTime} />
+            <br />
+            The time in Tokyo is: <FormattedTime value={currentTime} />
+        </p>;
+    }
+}
+
+App.propTypes = {
+    currentTime: PropTypes.object,
+};
+
+App.defaultProps = {
+    currentTime: new Date(),
+};
+
+export default App;
diff --git a/examples/explicit-timezone/src/index.js b/examples/explicit-timezone/src/index.js
@@ -0,0 +1,11 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import {IntlProvider} from 'react-intl';
+import App from './App';
+
+ReactDOM.render(
+    <IntlProvider locale="en" timeZone="Asia/Tokyo">
+        <App />
+    </IntlProvider>,
+    document.getElementById('root')
+);
diff --git a/src/components/provider.js b/src/components/provider.js
@@ -24,6 +24,7 @@ const intlFormatPropNames = Object.keys(intlFormatPropTypes);
 const defaultProps = {
   formats: {},
   messages: {},
+  timeZone: null,
   textComponent: 'span',
 
   defaultLocale: 'en',

diff --git a/src/format.js b/src/format.js
@@ -52,16 +52,15 @@ function getNamedFormat(formats, type, name) {
 }
 
 export function formatDate(config, state, value, options = {}) {
-  const {locale, formats} = config;
+  const {locale, formats, timeZone} = config;
   const {format} = options;
 
   let date = new Date(value);
-  let defaults = format && getNamedFormat(formats, 'date', format);
-  let filteredOptions = filterProps(
-    options,
-    DATE_TIME_FORMAT_OPTIONS,
-    defaults
-  );
+  let defaults = {
+    ...(timeZone && {timeZone}),
+    ...(format && getNamedFormat(formats, 'date', format)),
+  };
+  let filteredOptions = filterProps(options, DATE_TIME_FORMAT_OPTIONS, defaults);
 
   try {
     return state.getDateTimeFormat(locale, filteredOptions).format(date);
@@ -75,16 +74,15 @@ export function formatDate(config, state, value, options = {}) {
 }
 
 export function formatTime(config, state, value, options = {}) {
-  const {locale, formats} = config;
+  const {locale, formats, timeZone} = config;
   const {format} = options;
 
   let date = new Date(value);
-  let defaults = format && getNamedFormat(formats, 'time', format);
-  let filteredOptions = filterProps(
-    options,
-    DATE_TIME_FORMAT_OPTIONS,
-    defaults
-  );
+  let defaults = {
+    ...(timeZone && {timeZone}),
+    ...(format && getNamedFormat(formats, 'time', format)),
+  };
+  let filteredOptions = filterProps(options, DATE_TIME_FORMAT_OPTIONS, defaults);
 
   if (
     !filteredOptions.hour &&

diff --git a/src/types.js b/src/types.js
@@ -24,6 +24,7 @@ const funcReq = func.isRequired;
 
 export const intlConfigPropTypes = {
   locale: string,
+  timeZone: string,
   formats: object,
   messages: object,
   textComponent: any,

diff --git a/test/unit/components/provider.js b/test/unit/components/provider.js
@@ -129,7 +129,7 @@ describe('<IntlProvider>', () => {
         );
     });
 
-    it('renderes its `children`', () => {
+    it('renders its `children`', () => {
         const el = (
             <IntlProvider locale="en">
                 <Child />
@@ -153,13 +153,14 @@ describe('<IntlProvider>', () => {
         const {intl} = renderer.getMountedInstance().getChildContext();
 
         INTL_SHAPE_PROP_NAMES.forEach((propName) => {
-            expect(intl[propName]).toExist(`Missing context.intl prop: ${propName}`);
+            expect(intl[propName]).toNotBe(undefined, `Missing context.intl prop: ${propName}`);
         });
     });
 
     it('provides `context.intl` with values from intl config props', () => {
         const props = {
             locale       : 'fr-FR',
+            timeZone     : 'UTC',
             formats      : {},
             messages     : {},
             textComponent: 'span',
@@ -182,6 +183,23 @@ describe('<IntlProvider>', () => {
         });
     });
 
+    it('provides `context.intl` with timeZone from intl config props when it is specified', () => {
+        const props = {
+            timeZone: 'Europe/Paris',
+        };
+
+        const el = (
+            <IntlProvider {...props}>
+                <Child />
+            </IntlProvider>
+        );
+
+        renderer.render(el);
+        const {intl} = renderer.getMountedInstance().getChildContext();
+
+        expect(intl.timeZone).toBe('Europe/Paris');
+    });
+
     it('provides `context.intl` with values from `defaultProps` for missing or undefined props', () => {
         const props = {
             locale: 'en-US',
@@ -236,6 +254,7 @@ describe('<IntlProvider>', () => {
     it('inherits from an <IntlProvider> ancestor', () => {
         const props = {
             locale  : 'en',
+            timeZone: 'UTC',
             formats : {
                 date: {
                     'year-only': {
@@ -279,6 +298,7 @@ describe('<IntlProvider>', () => {
     it('shadows inherited intl config props from an <IntlProvider> ancestor', () => {
         const props = {
             locale  : 'en',
+            timeZone  : 'Australia/Adelaide',
             formats : {
                 date: {
                     'year-only': {
@@ -305,6 +325,7 @@ describe('<IntlProvider>', () => {
         const el = (
             <IntlProvider
                 locale="fr"
+                timeZone="Atlantic/Azores"
                 formats={{}}
                 messages={{}}
                 defaultLocale="en"

diff --git a/test/unit/format.js b/test/unit/format.js
@@ -134,6 +134,22 @@ describe('format API', () => {
             expect(formatDate(timestamp)).toBe(df.format(timestamp));
         });
 
+        it('uses the time zone specified by the provider', () => {
+            const timestamp = Date.now();
+            config.timeZone =  'Pacific/Wake';
+            formatDate = f.formatDate.bind(null, config, state);
+            const wakeDf = new Intl.DateTimeFormat(config.locale, {
+                timeZone: 'Pacific/Wake',
+            });
+            expect(formatDate(timestamp)).toBe(wakeDf.format(timestamp));
+            config.timeZone = 'Asia/Shanghai';
+            formatDate = f.formatDate.bind(null, config, state);
+            const shanghaiDf = new Intl.DateTimeFormat(config.locale, {
+                timeZone: 'Asia/Shanghai',
+            });
+            expect(formatDate(timestamp)).toBe(shanghaiDf.format(timestamp));
+        });
+
         describe('options', () => {
             it('accepts empty options', () => {
                 expect(formatDate(0, {})).toBe(df.format(0));
@@ -187,6 +203,16 @@ describe('format API', () => {
                     `[React Intl] No date format named: ${format}`
                 );
             });
+
+            it('uses time zone specified in options over the one passed through by the provider', () => {
+                const timestamp = Date.now();
+                config.timeZone = 'Pacific/Wake';
+                formatDate = f.formatDate.bind(null, config, state);
+                const shanghaiDf = new Intl.DateTimeFormat(config.locale, {
+                    timeZone: 'Asia/Shanghai',
+                });
+                expect(formatDate(timestamp, {timeZone: 'Asia/Shanghai'})).toBe(shanghaiDf.format(timestamp));
+            });
         });
     });
 
@@ -236,6 +262,26 @@ describe('format API', () => {
             expect(formatTime(timestamp)).toBe(df.format(timestamp));
         });
 
+        it('uses the time zone specified by the provider', () => {
+            const timestamp = Date.now();
+            config.timeZone = 'Africa/Johannesburg';
+            formatTime = f.formatTime.bind(null, config, state);
+            const johannesburgDf = new Intl.DateTimeFormat(config.locale, {
+                hour: 'numeric',
+                minute: 'numeric',
+                timeZone: 'Africa/Johannesburg',
+            });
+            expect(formatTime(timestamp)).toBe(johannesburgDf.format(timestamp));
+            config.timeZone = 'America/Chicago';
+            formatTime = f.formatTime.bind(null, config, state);
+            const chicagoDf = new Intl.DateTimeFormat(config.locale, {
+                hour: 'numeric',
+                minute: 'numeric',
+                timeZone: 'America/Chicago',
+            });
+            expect(formatTime(timestamp)).toBe(chicagoDf.format(timestamp));
+        });
+
         describe('options', () => {
             it('accepts empty options', () => {
                 expect(formatTime(0, {})).toBe(df.format(0));
@@ -319,6 +365,18 @@ describe('format API', () => {
                 df = new Intl.DateTimeFormat(locale, {hour});
                 expect(formatTime(date, {hour})).toBe(df.format(date));
             });
+
+            it('uses time zone specified in options over the one passed through by the provider', () => {
+                const timestamp = Date.now();
+                config.timeZone = 'Africa/Johannesburg';
+                formatTime = f.formatTime.bind(null, config, state);
+                const chicagoDf = new Intl.DateTimeFormat(config.locale, {
+                    hour: 'numeric',
+                    minute: 'numeric',
+                    timeZone: 'America/Chicago',
+                });
+                expect(formatTime(timestamp, {timeZone: 'America/Chicago'})).toBe(chicagoDf.format(timestamp));
+            });
         });
     });