Add timezone to profile settings page
- Users will have two options to select a timezone.
- UTC and browser offset timezone are the two options for the application.
- date-fns and date-fns-tz is used for date and time manipulations because:-
- The package size of library is smaller.
- It allows for importing functions to work with the native date object
rather than having to create a moment instance that carries a larger payload.
Signed-off-by: Sukanya Pandey <sukapan1@in.ibm.com>
Change-Id: I581803f230f501c0d34d0b53e7c2d89e8466ee60
diff --git a/src/main.js b/src/main.js
index 0c6d5b0..8336cb3 100644
--- a/src/main.js
+++ b/src/main.js
@@ -33,23 +33,46 @@
} from 'bootstrap-vue';
import Vuelidate from 'vuelidate';
import i18n from './i18n';
+import { format } from 'date-fns-tz';
// Filters
+Vue.filter('shortTimeZone', function(value) {
+ const longTZ = value
+ .toString()
+ .match(/\((.*)\)/)
+ .pop();
+ const regexNotUpper = /[*a-z ]/g;
+ return longTZ.replace(regexNotUpper, '');
+});
+
Vue.filter('formatDate', function(value) {
+ const isUtcDisplay = store.getters['global/isUtcDisplay'];
+
if (value instanceof Date) {
- return value.toISOString().substring(0, 10);
+ if (isUtcDisplay) {
+ return value.toISOString().substring(0, 10);
+ }
+ const pattern = `yyyy-MM-dd`;
+ const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+ return format(value, pattern, { timezone });
}
});
Vue.filter('formatTime', function(value) {
- const timeOptions = {
- hour: 'numeric',
- minute: 'numeric',
- second: 'numeric',
- timeZoneName: 'short'
- };
+ const isUtcDisplay = store.getters['global/isUtcDisplay'];
+
if (value instanceof Date) {
- return value.toLocaleTimeString('default', timeOptions);
+ if (isUtcDisplay) {
+ let timeOptions = {
+ timeZone: 'UTC',
+ hour12: false
+ };
+ return `${value.toLocaleTimeString('default', timeOptions)} UTC`;
+ }
+ const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+ const shortTz = Vue.filter('shortTimeZone')(value);
+ const pattern = `HH:mm:ss ('${shortTz}' O)`;
+ return format(value, pattern, { timezone }).replace('GMT', 'UTC');
}
});