From 744198cdc94fc61a88aa67afd43d9223ce92cd34 Mon Sep 17 00:00:00 2001
From: Adam Mills <adam@armills.info>
Date: Wed, 10 Aug 2016 16:30:06 -0400
Subject: [PATCH] Use native date formatting functions if available (#87)

With the removal of moment.js, dates and times are no longer formatted
using the native locale. This allows the browser to format if the
functionality is available (Everyone but Safari).

Also included is a correction in relativeTime. Times in the future were
being displaed incorrectly -xxx seconds, and the in/ago verbage was
reintroduced.
---
 panels/logbook/ha-logbook.html |  2 +-
 src/util/hass-util.html        | 80 ++++++++++++++++++++++++++++------
 2 files changed, 68 insertions(+), 14 deletions(-)

diff --git a/panels/logbook/ha-logbook.html b/panels/logbook/ha-logbook.html
index 27f0ae11c8..b12ed1c307 100644
--- a/panels/logbook/ha-logbook.html
+++ b/panels/logbook/ha-logbook.html
@@ -20,7 +20,7 @@
       }
 
       .time {
-        width: 23px;
+        width: 55px;
         font-size: .8em;
         color: var(--secondary-text-color);
       }
diff --git a/src/util/hass-util.html b/src/util/hass-util.html
index 81ea1148cd..19d167f31c 100644
--- a/src/util/hass-util.html
+++ b/src/util/hass-util.html
@@ -70,37 +70,91 @@ window.hassUtil.dynamicContentUpdater = function (root, newElementTag, attribute
   }
 };
 
+// Check for support of native locale string options
+function toLocaleStringSupportsOptions() {
+  try {
+    new Date().toLocaleString('i');
+  } catch (e) {
+    return e.name === 'RangeError';
+  }
+  return false;
+}
+function toLocaleDateStringSupportsOptions() {
+  try {
+    new Date().toLocaleDateString('i');
+  } catch (e) {
+    return e.name === 'RangeError';
+  }
+  return false;
+}
+function toLocaleTimeStringSupportsOptions() {
+  try {
+    new Date().toLocaleTimeString('i');
+  } catch (e) {
+    return e.name === 'RangeError';
+  }
+  return false;
+}
+
 window.fecha.masks.haDateTime = (window.fecha.masks.shortTime + ' ' +
                                  window.fecha.masks.mediumDate);
 
-window.hassUtil.formatDateTime = function (dateObj) {
-  return window.fecha.format(dateObj, 'haDateTime');
-};
+if (toLocaleStringSupportsOptions()) {
+  window.hassUtil.formatDateTime = function (dateObj) {
+    return dateObj.toLocaleString(navigator.language, {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+      hour: 'numeric',
+      minute: '2-digit',
+    });
+  };
+} else {
+  window.hassUtil.formatDateTime = function (dateObj) {
+    return window.fecha.format(dateObj, 'haDateTime');
+  };
+}
 
-window.hassUtil.formatDate = function (dateObj) {
-  return window.fecha.format(dateObj, 'mediumDate');
-};
+if (toLocaleDateStringSupportsOptions()) {
+  window.hassUtil.formatDate = function (dateObj) {
+    return dateObj.toLocaleDateString(navigator.language,
+      { year: 'numeric', month: 'long', day: 'numeric' });
+  };
+} else {
+  window.hassUtil.formatDate = function (dateObj) {
+    return window.fecha.format(dateObj, 'mediumDate');
+  };
+}
 
-window.hassUtil.formatTime = function (dateObj) {
-  return window.fecha.format(dateObj, 'shortTime');
-};
+if (toLocaleTimeStringSupportsOptions()) {
+  window.hassUtil.formatTime = function (dateObj) {
+    return dateObj.toLocaleTimeString(navigator.language,
+      { hour: 'numeric', minute: '2-digit' });
+  };
+} else {
+  window.hassUtil.formatTime = function (dateObj) {
+    return window.fecha.format(dateObj, 'shortTime');
+  };
+}
 
 window.hassUtil.relativeTime = function (dateObj) {
-  var delta = (new Date() - dateObj) / 1000;
+  var delta = Math.abs(new Date() - dateObj) / 1000;
+  var format = new Date() > dateObj ? '%s ago' : 'in %s';
   var tests = window.hassUtil.relativeTime.tests;
   var i;
 
   for (i = 0; i < tests.length; i += 2) {
     if (delta < tests[i]) {
       delta = Math.floor(delta);
-      return delta === 1 ? '1 ' + tests[i + 1] : delta + ' ' + tests[i + 1] + 's';
+      return format.replace('%s',
+        delta === 1 ? '1 ' + tests[i + 1] : delta + ' ' + tests[i + 1] + 's');
     }
 
     delta /= tests[i];
   }
 
   delta = Math.floor(delta);
-  return delta === 1 ? '1 week' : delta + ' weeks';
+  return format.replace('%s', delta === 1 ? '1 week' : delta + ' weeks');
 };
 
 window.hassUtil.relativeTime.tests = [
@@ -283,4 +337,4 @@ window.hassUtil.stateIcon = function (state) {
   return window.hassUtil.domainIcon(state.domain, state.state);
 };
 
-</script>
\ No newline at end of file
+</script>