Apply user language preference on datetime formatting (#1719)

src/components/state-history-chart-line.js

@@ -4,9 +4,10 @@ import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
 import './entity/ha-chart-base.js';
 
+import LocalizeMixin from '../mixins/localize-mixin.js';
 import formatDateTime from '../common/datetime/format_date_time.js';
 
-class StateHistoryChartLine extends PolymerElement {
+class StateHistoryChartLine extends LocalizeMixin(PolymerElement) {
   static get template() {
     return html`
     <style>
@@ -240,7 +241,7 @@ class StateHistoryChartLine extends PolymerElement {
       const item = items[0];
       const date = data.datasets[item.datasetIndex].data[item.index].x;
 
-      return formatDateTime(date);
+      return formatDateTime(date, this.language);
     };
 
     const chartOptions = {

src/components/state-history-chart-timeline.js

@@ -2,11 +2,13 @@ import '@polymer/polymer/lib/utils/debounce.js';
 import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
+import LocalizeMixin from '../mixins/localize-mixin.js';
+
 import './entity/ha-chart-base.js';
 
 import formatDateTime from '../common/datetime/format_date_time';
 
-class StateHistoryChartTimeline extends PolymerElement {
+class StateHistoryChartTimeline extends LocalizeMixin(PolymerElement) {
   static get template() {
     return html`
     <style>
@@ -151,8 +153,8 @@ class StateHistoryChartTimeline extends PolymerElement {
     const formatTooltipLabel = function (item, data) {
       const values = data.datasets[item.datasetIndex].data[item.index];
 
-      const start = formatDateTime(values[0]);
+      const start = formatDateTime(values[0], this.language);
-      const end = formatDateTime(values[1]);
+      const end = formatDateTime(values[1], this.language);
       const state = values[2];
 
       return [state, start, end];

src/dialogs/more-info/controls/more-info-sun.js

@@ -4,9 +4,10 @@ import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
 import '../../../components/ha-relative-time.js';
 
+import LocalizeMixin from '../../../mixins/localize-mixin.js';
 import formatTime from '../../../common/datetime/format_time.js';
 
-class MoreInfoSun extends PolymerElement {
+class MoreInfoSun extends LocalizeMixin(PolymerElement) {
   static get template() {
     return html`
     <style include="iron-flex iron-flex-alignment"></style>
@@ -64,7 +65,7 @@ class MoreInfoSun extends PolymerElement {
   }
 
   itemValue(type) {
-    return formatTime(this.itemDate(type));
+    return formatTime(this.itemDate(type), this.language);
   }
 }
 

src/panels/config/cloud/ha-config-cloud-account.js

@@ -13,11 +13,13 @@ import '../ha-config-section.js';
 
 import formatDateTime from '../../../common/datetime/format_date_time.js';
 import EventsMixin from '../../../mixins/events-mixin.js';
+import LocalizeMixin from '../../../mixins/localize-mixin.js';
 
 /*
  * @appliesMixin EventsMixin
+ * @appliesMixin LocalizeMixin
  */
-class HaConfigCloudAccount extends EventsMixin(PolymerElement) {
+class HaConfigCloudAccount extends EventsMixin(LocalizeMixin(PolymerElement)) {
   static get template() {
     return html`
     <style include="iron-flex ha-style">
@@ -199,7 +201,7 @@ class HaConfigCloudAccount extends EventsMixin(PolymerElement) {
     return subInfo === null
       ? 'Fetching subscription…'
       : subInfo.human_description.replace(
-        '{periodEnd}', formatDateTime(new Date(subInfo.subscription.current_period_end * 1000))
+        '{periodEnd}', formatDateTime(new Date(subInfo.subscription.current_period_end * 1000), this.language)
       );
   }
 

src/panels/dev-info/ha-panel-dev-info.js

@@ -18,10 +18,11 @@ import formatDateTime from '../../common/datetime/format_date_time.js';
 import formatTime from '../../common/datetime/format_time.js';
 
 import EventsMixin from '../../mixins/events-mixin.js';
+import LocalizeMixin from '../../mixins/localize-mixin.js';
 
 let registeredDialog = false;
 
-class HaPanelDevInfo extends EventsMixin(PolymerElement) {
+class HaPanelDevInfo extends EventsMixin(LocalizeMixin(PolymerElement)) {
   static get template() {
     return html`
     <style include="iron-positioning ha-style">
@@ -342,7 +343,7 @@ class HaPanelDevInfo extends EventsMixin(PolymerElement) {
     const dateTimeDay = new Date(date * 1000).setHours(0, 0, 0, 0);
 
     return dateTimeDay < today
-      ? formatDateTime(dateTime) : formatTime(dateTime);
+      ? formatDateTime(dateTime, this.language) : formatTime(dateTime, this.language);
   }
 
   openLog(event) {

src/panels/history/ha-panel-history.js

@@ -159,7 +159,7 @@ class HaPanelHistory extends LocalizeMixin(PolymerElement) {
     // We are unable to parse date because we use intl api to render date
     this.$.picker.set('i18n.parseDate', null);
     this.$.picker.set('i18n.formatDate', function (date) {
-      return formatDate(new Date(date.year, date.month, date.day));
+      return formatDate(new Date(date.year, date.month, date.day), this.language);
     });
   }
 

src/panels/logbook/ha-logbook.js

@@ -82,7 +82,7 @@ class HaLogbook extends EventsMixin(PolymerElement) {
   }
 
   _formatTime(date) {
-    return formatTime(new Date(date));
+    return formatTime(new Date(date), this.language);
   }
 
   entityClicked(ev) {

src/panels/logbook/ha-panel-logbook.js

@@ -135,7 +135,7 @@ class HaPanelLogbook extends LocalizeMixin(PolymerElement) {
     // We are unable to parse date because we use intl api to render date
     this.$.picker.set('i18n.parseDate', null);
     this.$.picker.set('i18n.formatDate', function (date) {
-      return formatDate(new Date(date.year, date.month, date.day));
+      return formatDate(new Date(date.year, date.month, date.day), this.language);
     });
   }
 

src/panels/mailbox/ha-panel-mailbox.js

@@ -200,7 +200,7 @@ class HaPanelMailbox extends LocalizeMixin(PolymerElement) {
       const platformItems = [];
       const arrayLength = values.length;
       for (let i = 0; i < arrayLength; i++) {
-        const datetime = formatDateTime(new Date(values[i].info.origtime * 1000));
+        const datetime = formatDateTime(new Date(values[i].info.origtime * 1000), this.language);
         platformItems.push({
           timestamp: datetime,
           caller: values[i].info.callerid,

src/panels/profile/ha-long-lived-access-tokens-card.js

@@ -85,14 +85,14 @@ class HaLongLivedTokens extends LocalizeMixin(EventsMixin(PolymerElement)) {
   _formatCreatedAt(created) {
     return this.localize(
       'ui.panel.profile.long_lived_access_tokens.created_at',
-      'date', formatDateTime(new Date(created))
+      'date', formatDateTime(new Date(created), this.language)
     );
   }
 
   _formatLastUsed(item) {
     return item.last_used_at ? this.localize(
       'ui.panel.profile.refresh_tokens.last_used',
-      'date', formatDateTime(new Date(item.last_used_at)),
+      'date', formatDateTime(new Date(item.last_used_at), this.language),
       'location', item.last_used_ip
     ) : this.localize('ui.panel.profile.refresh_tokens.not_used');
   }

src/panels/profile/ha-refresh-tokens-card.js

@@ -73,14 +73,14 @@ class HaRefreshTokens extends LocalizeMixin(EventsMixin(PolymerElement)) {
   _formatCreatedAt(created) {
     return this.localize(
       'ui.panel.profile.refresh_tokens.created_at',
-      'date', formatDateTime(new Date(created))
+      'date', formatDateTime(new Date(created), this.language)
     );
   }
 
   _formatLastUsed(item) {
     return item.last_used_at ? this.localize(
       'ui.panel.profile.refresh_tokens.last_used',
-      'date', formatDateTime(new Date(item.last_used_at)),
+      'date', formatDateTime(new Date(item.last_used_at), this.language),
       'location', item.last_used_ip
     ) : this.localize('ui.panel.profile.refresh_tokens.not_used');
   }