Fix timestamp ie moment (#1353)

* fix IE/edge issue; switch to moment.js * Fixed formating error in IE/Edge, switched to moment.js
grommet · May 15, 2017 · 191f7be · 191f7be
1 parent 7db5360
commit 191f7be
Showing 1 changed file with 59 additions and 41 deletions.
diff --git a/src/js/components/Timestamp.js b/src/js/components/Timestamp.js
@@ -1,23 +1,14 @@
-// (C) Copyright 2014-2016 Hewlett Packard Enterprise Development LP
+// (C) Copyright 2014-2017 Hewlett Packard Enterprise Development LP
 
 import React, { Component } from 'react';
+import moment from 'moment';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { getCurrentLocale } from '../utils/Locale';
 import CSSClassnames from '../utils/CSSClassnames';
+import { getCurrentLocale } from '../utils/Locale';
 
 const CLASS_ROOT = CSSClassnames.TIMESTAMP;
 
-const FORMATS = {
-  year: 'numeric',
-  month: 'short',
-  'month-full': 'long',
-  day: 'numeric',
-  hour: '2-digit',
-  minute: '2-digit',
-  second: '2-digit'
-};
-
 function _showField(field, fields) {
   let result = true;
   if (fields) {
@@ -48,45 +39,73 @@ export default class Timestamp extends Component {
 
   _formatForLocale ({value, fields}) {
     const locale = getCurrentLocale();
-    const dateObj = (typeof value === 'string') ? new Date(value) : value;
-    let dateOptions = {};
-    let timeOptions = {};
+    const dateObj = (typeof value === 'string') ? 
+      moment(value).lang(locale) : value;
+
+    let dateFormat;
+    let yearFormat;
+    let monthFormat;
+    let dayFormat;
+
+    let timeFormat;
+    let hourFormat;
+    let minuteFormat;
+    let secondFormat;
 
     if (_showField('date', fields)) {
-      dateOptions.year = FORMATS.year;
-      dateOptions.month = FORMATS.month;
-      dateOptions.day = FORMATS.day;
+      dateFormat = 'll';
     }
-    if (_showField('year', fields)) {
-      dateOptions.year = FORMATS.year;
-    }
-    if (_showField('month', fields)) {
-      dateOptions.month = FORMATS.month;
+
+    if (!dateFormat) {
+      if (_showField('year', fields)) {
+        yearFormat = 'YYYY';
+      }
+
+      if (_showField('month', fields)) {
+        monthFormat = 'MMM';
+      } else if (_showField('month-full', fields)) {
+        monthFormat = 'MMMM';
+      }
+
+      if (_showField('day', fields)) {
+        dayFormat = 'D';
+      }
     } else if (_showField('month-full', fields)) {
-      dateOptions.month = FORMATS['month-full'];
-    }
-    if (_showField('day', fields)) {
-      dateOptions.day = FORMATS.day;
+      dateFormat = 'LL';
     }
 
     if (_showField('time', fields)) {
-      timeOptions.hour = FORMATS.hour;
-      timeOptions.minute = FORMATS.minute;
-    }
-    if (_showField('hour', fields) || _showField('hours', fields)) {
-      timeOptions.hour = FORMATS.hour;
+      timeFormat = 'LT';
+    } 
+
+    if (!timeFormat) {
+      if (_showField('hour', fields) || _showField('hours', fields)) {
+        hourFormat = 'hh';
+      }
+      if (_showField('minute', fields) || _showField('minutes', fields)) {
+        minuteFormat = (hourFormat ? ':' : '') + 'mm';
+      }
+      if (_showField('second', fields) || _showField('seconds', fields)) {
+        secondFormat = (minuteFormat ? ':' : '') + 'ss';
+      }
+    } else if (_showField('second', fields) || _showField('seconds', fields)) {
+      timeFormat = 'LTS';
     }
-    if (_showField('minute', fields) || _showField('minutes', fields)) {
-      timeOptions.minute = FORMATS.minute;
+
+    if (!dateFormat) {
+      dateFormat = (
+        `${monthFormat || ''} ${dayFormat || ''} ${yearFormat || ''}`
+      );
     }
-    if (_showField('second', fields) || _showField('seconds', fields)) {
-      timeOptions.second = FORMATS.second;
+
+    if (!timeFormat) {
+      timeFormat = (
+        `${hourFormat || ''}${minuteFormat || ''}${secondFormat || ''}`
+      );
     }
 
-    const date = Object.keys(dateOptions).length > 0 ?
-      dateObj.toLocaleDateString(locale, dateOptions) : undefined;
-    const time = Object.keys(timeOptions).length > 0 ?
-      dateObj.toLocaleTimeString(locale, timeOptions) : undefined;
+    const date = dateFormat !== '  ' ? dateObj.format(dateFormat) : undefined;
+    const time = timeFormat !== '' ? dateObj.format(timeFormat) : undefined;
 
     this.setState({ date, time });
   }
@@ -104,7 +123,6 @@ export default class Timestamp extends Component {
       className
     );
 
-
     let dateElement;
     if (date) {
       dateElement = <span className={`${CLASS_ROOT}__date`}>{date}</span>;