ayanova/devdocs/todo.txt

@@ -49,6 +49,7 @@ SHELL / NAV / MENUS / LAYOUT
 
 TODO: LOCALIZATION
 	- ACTIONS
+		- AM PM or 24 hour time sb a setting in locale
 		- TRY AN ALTERNATE LANGUAGE IN VUETIFY USING THEIR METHOD, SEE WHATS INVOLVED
 		- Find out how to override the default locale for vuetify to set specific items to our localized text version
 			- this saves having to use a whole locale for just the calendar etc

ayanova/src/api/initialize.js

@@ -784,11 +784,11 @@ export default function initialize() {
                 window.$gz.store.commit("setLocale", {
                   decimalSeparator: ".",
                   currencySymbol: "$",
-                  shortDate: "YYYY-MM-DD",
-                  shortTime: "hh:mm:ss A",
-                  shortDateAndTime: "YYYY-MM-DD hh:mm:ss A",
-                  timeZoneOffset: res.data.timeZoneOffset,
-                  tag: res.data.tag || "en-US"
+                  hour12: false,
+                  // shortDate: "YYYY-MM-DD",
+                  // shortTime: "hh:mm:ss A",
+                  // shortDateAndTime: "YYYY-MM-DD hh:mm:ss A",
+                  timeZoneOffset: res.data.timeZoneOffset
                 });
 
                 resolve();

ayanova/src/components/time-control.vue

@@ -14,7 +14,12 @@
               :error="!!error"
             ></v-text-field>
           </template>
-          <v-time-picker scrollable ampm-in-title v-model="timeOnly">
+          <v-time-picker
+            scrollable
+            ampm-in-title
+            :format="24hr"
+            v-model="timeOnly"
+          >
             <v-spacer></v-spacer>
             <v-btn text color="primary" @click="dlgtime = false">{{
               lt("OK")
@@ -52,7 +57,12 @@ export default {
       }
     }
   },
-  data: () => ({ date: null, oldDate: null, dlgtime: false }),
+  data: () => ({
+    date: null,
+    oldDate: null,
+    dlgtime: false,
+    ampmFormat: "ampm" //or "24hr"
+  }),
   props: {
     label: String,
     rules: Array,

ayanova/src/main.js

@@ -147,14 +147,21 @@ Vue.filter("capitalize", function vueFilterCapitalize(value) {
   return value.charAt(0).toUpperCase() + value.slice(1);
 });
 
-//Convert date to localized value and return as short date format chosen
-Vue.filter("shortdatelocalized", function vueFilterShortDateLocalized(value) {
+//Convert date to offset value and return as short date time based on browser format
+Vue.filter("shortdatelocalized", function vueFilterShortDateAndTimeLocalized(
+  value
+) {
   if (!value) return "";
 
-  return dayjs
+  var localizedDate = dayjs
     .utc(value)
     .add(locale.format().timeZoneOffset, "hour")
-    .format(locale.format().shortDateAndTime);
+    .toDate();
+  return localizedDate.toLocaleString(undefined, {
+    dateStyle: "short",
+    timeStyle: "short",
+    hour12: locale.format().hour12
+  });
 });
 
 //Convert date to localized value and return as short date format chosen
@@ -176,7 +183,8 @@ Vue.filter("shorttimeonlylocalized", function vueFilterShortTimeOnlyLocalized(
 ) {
   //TODO NOT DONE
   if (!value) return "";
-
+  //new Date().toLocaleString(undefined,{dateStyle:"short",timeStyle:"short",hour12:false})
+  //also toLocaleDateString and toLocaleTimeString well supported use similar options
   return dayjs
     .utc(value)
     .add(locale.format().timeZoneOffset, "hour")

ayanova/src/store.js

@@ -24,9 +24,10 @@ export default new Vuex.Store({
       tag: "en-US",
       decimalSeparator: ".",
       currencySymbol: "$",
-      shortDate: "YYYY-MM-DD",
-      shortTime: "hh:mm:ss A",
-      shortDateAndTime: "YYYY-MM-DD hh:mm:ss A",
+      hour12: true,
+      // shortDate: "YYYY-MM-DD",
+      // shortTime: "hh:mm:ss A",
+      // shortDateAndTime: "YYYY-MM-DD hh:mm:ss A",
       timeZoneOffset: -7 //timeZoneOffset is in decimal hours
     },
     navItems: [],
@@ -60,9 +61,10 @@ export default new Vuex.Store({
       state.locale.tag = "en-US";
       state.locale.decimalSeparator = ".";
       state.locale.currencySymbol = "$";
-      state.locale.shortDate = "YYYY-MM-DD";
-      state.locale.shortTime = "hh:mm:ss A";
-      state.locale.shortDateAndTime = "YYYY-MM-DD hh:mm:ss A";
+      state.locale.hour12 = true;
+      // state.locale.shortDate = "YYYY-MM-DD";
+      // state.locale.shortTime = "hh:mm:ss A";
+      // state.locale.shortDateAndTime = "YYYY-MM-DD hh:mm:ss A";
       state.locale.timeZoneOffset = -7;
     },
     addNavItem(state, data) {
@@ -80,9 +82,10 @@ export default new Vuex.Store({
       // mutate state
       state.locale.decimalSeparator = data.decimalSeparator;
       state.locale.currencySymbol = data.currencySymbol;
-      state.locale.shortDate = data.shortDate;
-      state.locale.shortTime = data.shortTime;
-      state.locale.shortDateAndTime = data.shortDateAndTime;
+      state.locale.hour12 = data.hour12;
+      // state.locale.shortDate = data.shortDate;
+      // state.locale.shortTime = data.shortTime;
+      // state.locale.shortDateAndTime = data.shortDateAndTime;
       state.locale.timeZoneOffset = data.timeZoneOffset;
       state.locale.tag = data.tag;
     },