Now the date passed to DateTimeFormat is always in UTC

mui · Jun 4, 2017 · b5a9b7c · b5a9b7c
1 parent 2fdc0bb
commit b5a9b7c
Show file tree

Hide file tree

Showing 7 changed files with 25 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,
 };