Update Date and Time Settings to include UTC/offset label

Label updates allow the user to easily understand
the expectation for entering time by using specific
label text for "24 hour time" and removing parenthesis
from the helper text as parenthesis are not needed to
in the input field.

UTC/offset is displayed based on user preference.

Signed-off-by: Dixsie Wolmers <dixsie@ibm.com>
Change-Id: I41f98d9d16f0a4a81af39ce9b25768a1c0b89f08
diff --git a/src/views/ProfileSettings/ProfileSettings.vue b/src/views/ProfileSettings/ProfileSettings.vue
index 81ea7b6..dee8d39 100644
--- a/src/views/ProfileSettings/ProfileSettings.vue
+++ b/src/views/ProfileSettings/ProfileSettings.vue
@@ -131,7 +131,6 @@
 import i18n from '@/i18n';
 import BVToastMixin from '@/components/Mixins/BVToastMixin';
 import InputPasswordToggle from '@/components/Global/InputPasswordToggle';
-import { format } from 'date-fns-tz';
 import {
   maxLength,
   minLength,
@@ -139,6 +138,7 @@
   sameAs
 } from 'vuelidate/lib/validators';
 import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
+import LocalTimezoneLabelMixin from '@/components/Mixins/LocalTimezoneLabelMixin';
 import PageTitle from '@/components/Global/PageTitle';
 import PageSection from '@/components/Global/PageSection';
 import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
@@ -146,7 +146,12 @@
 export default {
   name: 'ProfileSettings',
   components: { InputPasswordToggle, PageSection, PageTitle },
-  mixins: [BVToastMixin, LoadingBarMixin, VuelidateMixin],
+  mixins: [
+    BVToastMixin,
+    LocalTimezoneLabelMixin,
+    LoadingBarMixin,
+    VuelidateMixin
+  ],
   data() {
     return {
       form: {
@@ -164,10 +169,7 @@
       return this.$store.getters['localUsers/accountPasswordRequirements'];
     },
     timezone() {
-      const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
-      const shortTz = this.$options.filters.shortTimeZone(new Date());
-      const pattern = `'${shortTz}' O`;
-      return format(new Date(), pattern, { timezone }).replace('GMT', 'UTC');
+      return this.localOffset();
     }
   },
   created() {