From b5a9b7c8f8ed00259f441eb1ac212a244df2ffdb Mon Sep 17 00:00:00 2001
From: Andrei Mitin <andrei.mitin@gmail.com>
Date: Mon, 5 Jun 2017 01:56:29 +0300
Subject: [PATCH] Now the date passed to DateTimeFormat is always in UTC

---
 .../pages/components/DatePicker/ExampleInternational.js  | 1 +
 src/DatePicker/CalendarToolbar.js                        | 4 +++-
 src/DatePicker/CalendarYear.js                           | 3 ++-
 src/DatePicker/DateDisplay.js                            | 7 +++++--
 src/DatePicker/DatePicker.js                             | 7 ++++---
 src/DatePicker/DayButton.js                              | 5 +++--
 src/DatePicker/dateUtils.js                              | 9 +++++++--
 7 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/docs/src/app/components/pages/components/DatePicker/ExampleInternational.js b/docs/src/app/components/pages/components/DatePicker/ExampleInternational.js
index d634a8f619d98b..57dcff6c644d2b 100644
--- a/docs/src/app/components/pages/components/DatePicker/ExampleInternational.js
+++ b/docs/src/app/components/pages/components/DatePicker/ExampleInternational.js
@@ -57,6 +57,7 @@ const DatePickerExampleInternational = () => (
         day: 'numeric',
         month: 'long',
         year: 'numeric',
+        timeZone: 'UTC',
       }).format}
     />
   </div>
diff --git a/src/DatePicker/CalendarToolbar.js b/src/DatePicker/CalendarToolbar.js
index 62b0bf05ab1cd7..43e0ad0062efb8 100644
--- a/src/DatePicker/CalendarToolbar.js
+++ b/src/DatePicker/CalendarToolbar.js
@@ -1,5 +1,6 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
+import {dateUTC} from './dateUtils';
 import IconButton from '../IconButton';
 import NavigationChevronLeft from '../svg-icons/navigation/chevron-left';
 import NavigationChevronRight from '../svg-icons/navigation/chevron-right';
@@ -70,7 +71,8 @@ class CalendarToolbar extends Component {
     const dateTimeFormatted = new DateTimeFormat(locale, {
       month: 'long',
       year: 'numeric',
-    }).format(displayDate);
+      timeZone: 'UTC',
+    }).format(dateUTC(displayDate));
 
     return (
       <div style={styles.root}>
diff --git a/src/DatePicker/CalendarYear.js b/src/DatePicker/CalendarYear.js
index fc8e24cb4d20b0..e7c241afe29dd6 100644
--- a/src/DatePicker/CalendarYear.js
+++ b/src/DatePicker/CalendarYear.js
@@ -50,7 +50,8 @@ class CalendarYear extends Component {
 
       const yearFormated = new DateTimeFormat(locale, {
         year: 'numeric',
-      }).format(utils.setYear(selectedDate, year));
+        timeZone: 'UTC',
+      }).format(utils.dateUTC(utils.setYear(selectedDate, year)));
 
       const yearButton = (
         <YearButton
diff --git a/src/DatePicker/DateDisplay.js b/src/DatePicker/DateDisplay.js
index 8a37bd14a30fea..72f55bf7c4b008 100644
--- a/src/DatePicker/DateDisplay.js
+++ b/src/DatePicker/DateDisplay.js
@@ -1,5 +1,6 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
+import {dateUTC} from './dateUtils';
 import transitions from '../styles/transitions';
 import SlideInTransitionGroup from '../internal/SlideIn';
 
@@ -141,13 +142,15 @@ class DateDisplay extends Component {
 
     const year = new DateTimeFormat(locale, {
       year: 'numeric',
-    }).format(selectedDate);
+      timeZone: 'UTC',
+    }).format(dateUTC(selectedDate));
 
     const dateTime = new DateTimeFormat(locale, {
       month: 'short',
       weekday: 'short',
       day: '2-digit',
-    }).format(selectedDate);
+      timeZone: 'UTC',
+    }).format(dateUTC(selectedDate));
 
     return (
       <div {...other} style={prepareStyles(styles.root, style)}>
diff --git a/src/DatePicker/DatePicker.js b/src/DatePicker/DatePicker.js
index 58e9031c0f5417..46708826821af2 100644
--- a/src/DatePicker/DatePicker.js
+++ b/src/DatePicker/DatePicker.js
@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
-import {dateTimeFormat, formatIso, isEqualDate} from './dateUtils';
+import {dateTimeFormat, formatIso, isEqualDate, dateUTC} from './dateUtils';
 import DatePickerDialog from './DatePickerDialog';
 import TextField from '../TextField';
 
@@ -262,7 +262,8 @@ class DatePicker extends Component {
         day: 'numeric',
         month: 'numeric',
         year: 'numeric',
-      }).format(date);
+        timeZone: 'UTC',
+      }).format(dateUTC(date));
     } else {
       return formatIso(date);
     }
@@ -308,7 +309,7 @@ class DatePicker extends Component {
           onTouchTap={this.handleTouchTap}
           ref="input"
           style={textFieldStyle}
-          value={this.state.date ? formatDate(this.state.date) : ''}
+          value={this.state.date ? formatDate(dateUTC(this.state.date)) : ''}
         />
         <DatePickerDialog
           DateTimeFormat={DateTimeFormat}
diff --git a/src/DatePicker/DayButton.js b/src/DatePicker/DayButton.js
index 9dcba34e2d4834..51c636e13b1cb2 100644
--- a/src/DatePicker/DayButton.js
+++ b/src/DatePicker/DayButton.js
@@ -1,7 +1,7 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import Transition from '../styles/transitions';
-import {isEqualDate} from './dateUtils';
+import {isEqualDate, dateUTC} from './dateUtils';
 import EnhancedButton from '../internal/EnhancedButton';
 
 function getStyles(props, context, state) {
@@ -129,7 +129,8 @@ class DayButton extends Component {
         <span style={prepareStyles(styles.label)}>
           {new DateTimeFormat(locale, {
             day: 'numeric',
-          }).format(date)}
+            timeZone: 'UTC',
+          }).format(dateUTC(date))}
         </span>
       </EnhancedButton>
     ) : (
diff --git a/src/DatePicker/dateUtils.js b/src/DatePicker/dateUtils.js
index 71169222818d19..f03a65cac73f0a 100644
--- a/src/DatePicker/dateUtils.js
+++ b/src/DatePicker/dateUtils.js
@@ -119,10 +119,10 @@ export function getWeekArray(d, firstDayOfWeek) {
 }
 
 export function localizedWeekday(DateTimeFormat, locale, day, firstDayOfWeek) {
-  const weekdayFormatter = new DateTimeFormat(locale, {weekday: 'narrow'});
+  const weekdayFormatter = new DateTimeFormat(locale, {weekday: 'narrow', timeZone: 'UTC'});
   const firstDayDate = getFirstDayOfWeek();
 
-  return weekdayFormatter.format(addDays(firstDayDate, day + firstDayOfWeek));
+  return weekdayFormatter.format(dateUTC(addDays(firstDayDate, day + firstDayOfWeek)));
 }
 
 // Convert date to ISO 8601 (YYYY-MM-DD) date string, accounting for current timezone
@@ -168,6 +168,10 @@ export function yearDiff(d1, d2) {
   return ~~(monthDiff(d1, d2) / 12);
 }
 
+export function dateUTC(date) {
+  return new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
+}
+
 export const defaultUtils = {
   getYear,
   setYear,
@@ -177,4 +181,5 @@ export const defaultUtils = {
   getFirstDayOfMonth,
   getWeekArray,
   monthDiff,
+  dateUTC,
 };