Format date and time for international locales

  Uninstalls vue-date-fns and uses toLocaleDateString() method to
  return formatted date and time.

  Date language is set by i18n and time/timezone is formatted by
  browser locale.

  Uses vue filter to format date and time as:
    - short month, day, year, time and timezone
    - 'en' example: Feb 23, 2020, 3:40:25 PM CST
    - 'es' example: 25 feb 2020 14:23:36 GMT-6
    - hour12 value is determined by browser default

Signed-off-by: Dixsie Wolmers <dixsie@ibm.com>
Change-Id: I4fe8c51f5437cef263f1e0ea4184c0b552c85f4d

1 files changed, 24 insertions, 2 deletions

diff --git a/src/main.js b/src/main.js
index 72167510..84adb408 100644
--- a/src/main.js
+++ b/src/main.js
@@ -2,7 +2,6 @@ import Vue from 'vue';
 import App from './App.vue';
 import router from './router';
 import store from './store';
-import { dateFilter } from 'vue-date-fns';
 import {
   AlertPlugin,
   BadgePlugin,
@@ -27,8 +26,31 @@ import {
 import Vuelidate from 'vuelidate';
 import i18n from './i18n';
 
-Vue.filter('date', dateFilter);
+// Filters
+Vue.filter('formatDate', function(value) {
+  const dateOptions = {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric'
+  };
+  if (value instanceof Date) {
+    return value.toLocaleDateString(i18n.locale, dateOptions);
+  }
+});
+
+Vue.filter('formatTime', function(value) {
+  const timeOptions = {
+    hour: 'numeric',
+    minute: 'numeric',
+    second: 'numeric',
+    timeZoneName: 'short'
+  };
+  if (value instanceof Date) {
+    return value.toLocaleTimeString('default', timeOptions);
+  }
+});
 
+// Plugins
 Vue.use(AlertPlugin);
 Vue.use(BadgePlugin);
 Vue.use(ButtonPlugin);