ayanova/src/components/date-time-control.vue

@@ -55,6 +55,7 @@
             ref="theTimePicker"
             scrollable
             ampm-in-title
+            :format="ampmFormat"
             v-model="timeOnly"
           >
             <v-spacer></v-spacer>
@@ -103,7 +104,8 @@ export default {
     oldDate: null,
     dlgdate: false,
     dlgtime: false,
-    defaultLocale: window.$gz.locale.getFirstBrowserLanguage().split("-", 1)[0]
+    defaultLocale: window.$gz.locale.getFirstBrowserLanguage().split("-", 1)[0],
+    ampmFormat: window.$gz.locale.format().hour12 ? "ampm" : "24hr"
   }),
   props: {
     label: String,

ayanova/src/components/gz-data-table.vue

@@ -445,7 +445,7 @@ function buildRecords(listData, columndefinitions, filters) {
       var display = column.v;
       switch (dataType) {
         case 1: //datetime format to shortdatetime
-          display = filters.shortdatelocalized(display);
+          display = filters.shortdateandtimelocalized(display);
           break;
         case 2: //date only
           display = filters.shortdateonlylocalized(display);

ayanova/src/main.js

@@ -148,21 +148,26 @@ Vue.filter("capitalize", function vueFilterCapitalize(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 "";
+Vue.filter(
+  "shortdateandtimelocalized",
+  function vueFilterShortDateAndTimeLocalized(value) {
+    if (!value) return "";
 
-  var localizedDate = dayjs
-    .utc(value)
-    .add(locale.format().timeZoneOffset, "hour")
-    .toDate();
-  return localizedDate.toLocaleString(undefined, {
-    dateStyle: "short",
-    timeStyle: "short",
-    hour12: locale.format().hour12
-  });
-});
+    var localizedDate = dayjs
+      .utc(value)
+      .add(locale.format().timeZoneOffset, "hour")
+      .toDate();
+
+    return localizedDate.toLocaleString(
+      window.$gz.locale.getFirstBrowserLanguage(),
+      {
+        dateStyle: "short",
+        timeStyle: "short",
+        hour12: locale.format().hour12
+      }
+    );
+  }
+);
 
 //Convert date to localized value and return as short date format chosen
 Vue.filter("shortdateonlylocalized", function vueFilterShortDateOnlyLocalized(
@@ -170,11 +175,17 @@ Vue.filter("shortdateonlylocalized", function vueFilterShortDateOnlyLocalized(
 ) {
   //TODO NOT DONE
   if (!value) return "";
-
-  return dayjs
+  var localizedDate = dayjs
     .utc(value)
     .add(locale.format().timeZoneOffset, "hour")
-    .format(locale.format().shortDateAndTime);
+    .toDate();
+
+  return localizedDate.toLocaleDateString(
+    window.$gz.locale.getFirstBrowserLanguage(),
+    {
+      dateStyle: "short"
+    }
+  );
 });
 
 //Convert date to localized value and return as short date format chosen
@@ -185,10 +196,18 @@ Vue.filter("shorttimeonlylocalized", function vueFilterShortTimeOnlyLocalized(
   if (!value) return "";
   //new Date().toLocaleString(undefined,{dateStyle:"short",timeStyle:"short",hour12:false})
   //also toLocaleDateString and toLocaleTimeString well supported use similar options
-  return dayjs
+  var localizedDate = dayjs
     .utc(value)
     .add(locale.format().timeZoneOffset, "hour")
-    .format(locale.format().shortDateAndTime);
+    .toDate();
+
+  return localizedDate.toLocaleTimeString(
+    window.$gz.locale.getFirstBrowserLanguage(),
+    {
+      timeStyle: "short",
+      hour12: locale.format().hour12
+    }
+  );
 });
 
 Vue.filter("currency", function vueFilterCurrency(value) {

ayanova/src/views/ay-about.vue

@@ -25,9 +25,9 @@
         </div>
 
         <div>
-          <span class="ml-6 body-1">{{ lt("Language") }}:</span>
+          <span class="ml-6 body-1">12h:</span>
           <span class="body-2">
-            {{ ltFormat().tag }}
+            {{ ltFormat().hour12 }}
           </span>
         </div>
 
@@ -48,7 +48,7 @@
           <span class="body-2">{{ ltFormat().currencySymbol }}</span>
         </div>
 
-        <div>
+        <!-- <div>
           <span class="ml-6 body-1">{{ lt("ShortDateFormat") }}:</span>
           <span class="body-2">{{ ltFormat().shortDate }}</span>
         </div>
@@ -61,7 +61,7 @@
         <div>
           <span class="ml-6 body-1">{{ lt("ShortDateAndTimeFormat") }}: </span>
           <span class="body-2">{{ ltFormat().shortDateAndTime }}</span>
-        </div>
+        </div> -->
 
         <v-divider class="mt-6"></v-divider>
         <v-subheader>{{ lt("Browser") }}</v-subheader>