diff options
author | Sukanya Pandey <sukapan1@in.ibm.com> | 2020-06-23 20:24:27 +0300 |
---|---|---|
committer | Derick Montague <derick.montague@ibm.com> | 2020-07-28 00:35:55 +0300 |
commit | fc16f3c268a9d35f889f5770331d11e87ab16af3 (patch) | |
tree | 447e8f3b8b1eba2767e05ab016a46fd540e3a230 /src/main.js | |
parent | a2c99829a713e8411bda20091765ee972cd4d8b9 (diff) | |
download | webui-vue-fc16f3c268a9d35f889f5770331d11e87ab16af3.tar.xz |
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
Diffstat (limited to 'src/main.js')
-rw-r--r-- | src/main.js | 39 |
1 files changed, 31 insertions, 8 deletions
diff --git a/src/main.js b/src/main.js index 0c6d5b07..8336cb3d 100644 --- a/src/main.js +++ b/src/main.js @@ -33,23 +33,46 @@ import { } 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'); } }); |