From 17d0548ceb3eeff562706520080c0acf77430477 Mon Sep 17 00:00:00 2001
From: John Cardinal <support@ayanova.com>
Date: Sat, 28 Nov 2020 00:26:09 +0000
Subject: [PATCH]

---
 ayanova/src/components/date-control.vue       | 205 +++++++++++-------
 .../src/components/date-native-control.vue    | 108 +++++++++
 .../components/date-non-native-control.vue    | 157 --------------
 ayanova/src/components/time-control.vue       | 201 ++++++++++-------
 .../src/components/time-native-control.vue    | 111 ++++++++++
 .../components/time-non-native-control.vue    | 156 -------------
 6 files changed, 469 insertions(+), 469 deletions(-)
 create mode 100644 ayanova/src/components/date-native-control.vue
 delete mode 100644 ayanova/src/components/date-non-native-control.vue
 create mode 100644 ayanova/src/components/time-native-control.vue
 delete mode 100644 ayanova/src/components/time-non-native-control.vue

diff --git a/ayanova/src/components/date-control.vue b/ayanova/src/components/date-control.vue
index e450bd62..9145996f 100644
--- a/ayanova/src/components/date-control.vue
+++ b/ayanova/src/components/date-control.vue
@@ -1,107 +1,156 @@
 <template>
   <div>
-    <template v-if="!readonly">
-      <v-text-field
-        ref="dateField"
-        :value="dateValue"
-        @change="updateValue()"
-        :readonly="readonly"
-        :disabled="disabled"
-        :label="label"
-        :rules="rules"
-        type="date"
-        :error-messages="allErrors()"
-        :data-cy="'dateinput:' + testId"
-      ></v-text-field>
-    </template>
-    <template v-else>
-      <v-text-field
-        :value="readonlyFormat()"
-        :label="label"
-        readonly
-        disabled
-      ></v-text-field>
-    </template>
+    <v-row v-if="!readonly">
+      <v-col cols="12">
+        <v-dialog v-model="dlgdate" persistent width="290px">
+          <template v-slot:activator="{ on }">
+            <v-text-field
+              v-on="on"
+              prepend-icon="$ayiCalendarAlt"
+              @click:prepend="dlgdate = true"
+              v-model="formatDate"
+              v-bind:label="label"
+              v-bind:rules="rules"
+              readonly
+              :error="!!error"
+            ></v-text-field>
+          </template>
+          <v-date-picker :locale="defaultLocale" v-model="dateOnly">
+            <v-spacer></v-spacer>
+            <v-btn text color="primary" @click="dlgdate = false">{{
+              $ay.t("OK")
+            }}</v-btn>
+          </v-date-picker>
+        </v-dialog>
+      </v-col>
+    </v-row>
+    <v-text-field
+      v-if="readonly"
+      v-model="formatDateTime"
+      v-bind:label="label"
+      prepend-icon="$ayiCalendarAlt"
+      disabled
+    ></v-text-field>
+    <p v-show="error" class="form__error v-messages theme--light error--text">
+      {{ error }}
+    </p>
   </div>
 </template>
 <script>
 /*  Xeslint-disable */
+//******************************** NOTE: this control also captures the TIME even though it's DATE only, this is an intentional design decision to support field change to date or date AND time and is considered a display issue */
 export default {
-  data() {
-    return {
-      timeZoneName: window.$gz.locale.getBrowserTimeZoneName()
-    };
-  },
+  data: () => ({
+    date: null,
+    oldDate: null,
+    dlgdate: false,
+    //cache display format stuff
+    timeZoneName: window.$gz.locale.getBrowserTimeZoneName(),
+    languageName: window.$gz.locale.getBrowserLanguages(),
+    defaultLocale: window.$gz.locale.getBrowserFirstLanguage().split("-", 1)[0]
+  }),
   props: {
     label: String,
     rules: Array,
-    "error-messages": { type: Array, default: null },
-    value: { type: String, default: null },
+    value: String,
     readonly: { type: Boolean, default: false },
-    disabled: { type: Boolean, default: false },
     error: {
       type: String,
       required: false
-    },
-    testId: String
-  },
-  computed: {
-    dateValue() {
-      return window.$gz.locale.utcDateStringToLocal8601DateOnlyString(
-        this.value,
-        this.timeZoneName
-      );
     }
   },
-  methods: {
-    allErrors() {
-      let ret = "";
-      if (this.error != null) {
-        ret = this.error;
+  watch: {
+    date() {
+      //this tortuous fuckery is required so that the input and change events only fire on a real change, not initial page load
+      //also it shouldn't signal a change if the values are the same and nothing was effectively changed
+      let hasChanged = false;
+      if (this.date != this.oldDate) {
+        hasChanged = true;
       }
-      if (this.errorMessages != null && this.errorMessages.length > 0) {
-        ret += this.errorMessages.toString();
+      this.oldDate = this.date;
+      if (hasChanged) {
+        this.$emit("input", this.date); //always in UTC
       }
-      return ret;
     },
-    readonlyFormat() {
-      return window.$gz.locale.utcDateToShortDateLocalized(
-        this.internalValue,
+    value() {
+      this.date = this.value; //always in UTC
+    }
+  },
+  computed: {
+    formatDateTime() {
+      return window.$gz.locale.utcDateToShortDateAndTimeLocalized(
+        this.value,
         this.timeZoneName,
         this.languageName,
         this.hour12
       );
     },
-    updateValue() {
-      let vm = this;
-      let dateValue = vm.$refs.dateField.$refs.input.value;
-      if (!dateValue) {
-        let v = new Date();
-        let fullYear = v.getFullYear();
-        let fullMonth = v.getMonth() + 1;
-        if (fullMonth < 10) {
-          fullMonth = "0" + fullMonth.toString();
-        }
-        let fullDay = v.getDate();
-        if (fullDay < 10) {
-          fullDay = "0" + fullDay.toString();
-        }
-        dateValue = fullYear + "-" + fullMonth + "-" + fullDay;
-      }
-
-      let timeValue = window.$gz.locale.utcDateStringToLocal8601TimeOnlyString(
-        vm.value,
-        vm.timeZoneName
+    formatDate() {
+      return window.$gz.locale.utcDateToShortDateLocalized(
+        this.value,
+        this.timeZoneName,
+        this.languageName
       );
-      if (!timeValue) {
-        timeValue = "00:00:00";
-      }
-
-      let ret = window.$gz.locale.localTimeDateStringToUTC8601String(
-        dateValue + "T" + timeValue,
-        vm.timeZoneName
+    },
+    formatTime() {
+      return window.$gz.locale.utcDateToShortTimeLocalized(
+        this.value,
+        this.timeZoneName,
+        this.languageName,
+        this.hour12
       );
-      vm.$emit("input", ret);
+    },
+    dateOnly: {
+      get() {
+        //return date only portion converted to local working time zone: YYYY-MM-DD
+        return window.$gz.locale.utcDateStringToLocal8601DateOnlyString(
+          this.value,
+          this.timeZoneName
+        );
+      },
+      set(value) {
+        //2017-08-15T12:10:34.4443084+03:00
+        let TimePortion = this.timeOnly;
+        if (!TimePortion) {
+          TimePortion = "00:00:00";
+        }
+        this.date = window.$gz.locale.localTimeDateStringToUTC8601String(
+          value + "T" + TimePortion,
+          this.timeZoneName
+        );
+      }
+    },
+    timeOnly: {
+      //expects just the hours minutes seconds portion: 18:18:49
+      //Needs to convert into and out of the desired time zone or the control will show the UTC time instead
+      get() {
+        return window.$gz.locale.utcDateStringToLocal8601TimeOnlyString(
+          this.value,
+          this.timeZoneName
+        );
+      },
+      set(value) {
+        let DatePortion = this.dateOnly;
+        if (!DatePortion) {
+          let v = new Date();
+          let fullYear = v.getFullYear();
+          let fullMonth = v.getMonth() + 1;
+          if (fullMonth < 10) {
+            fullMonth = "0" + fullMonth.toString();
+          }
+          let fullDay = v.getDate();
+          if (fullDay < 10) {
+            fullDay = "0" + fullDay.toString();
+          }
+
+          DatePortion = fullYear + "-" + fullMonth + "-" + fullDay;
+        }
+
+        this.date = window.$gz.locale.localTimeDateStringToUTC8601String(
+          DatePortion + "T" + value,
+          this.timeZoneName
+        );
+      }
     }
   }
 };
diff --git a/ayanova/src/components/date-native-control.vue b/ayanova/src/components/date-native-control.vue
new file mode 100644
index 00000000..e450bd62
--- /dev/null
+++ b/ayanova/src/components/date-native-control.vue
@@ -0,0 +1,108 @@
+<template>
+  <div>
+    <template v-if="!readonly">
+      <v-text-field
+        ref="dateField"
+        :value="dateValue"
+        @change="updateValue()"
+        :readonly="readonly"
+        :disabled="disabled"
+        :label="label"
+        :rules="rules"
+        type="date"
+        :error-messages="allErrors()"
+        :data-cy="'dateinput:' + testId"
+      ></v-text-field>
+    </template>
+    <template v-else>
+      <v-text-field
+        :value="readonlyFormat()"
+        :label="label"
+        readonly
+        disabled
+      ></v-text-field>
+    </template>
+  </div>
+</template>
+<script>
+/*  Xeslint-disable */
+export default {
+  data() {
+    return {
+      timeZoneName: window.$gz.locale.getBrowserTimeZoneName()
+    };
+  },
+  props: {
+    label: String,
+    rules: Array,
+    "error-messages": { type: Array, default: null },
+    value: { type: String, default: null },
+    readonly: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    error: {
+      type: String,
+      required: false
+    },
+    testId: String
+  },
+  computed: {
+    dateValue() {
+      return window.$gz.locale.utcDateStringToLocal8601DateOnlyString(
+        this.value,
+        this.timeZoneName
+      );
+    }
+  },
+  methods: {
+    allErrors() {
+      let ret = "";
+      if (this.error != null) {
+        ret = this.error;
+      }
+      if (this.errorMessages != null && this.errorMessages.length > 0) {
+        ret += this.errorMessages.toString();
+      }
+      return ret;
+    },
+    readonlyFormat() {
+      return window.$gz.locale.utcDateToShortDateLocalized(
+        this.internalValue,
+        this.timeZoneName,
+        this.languageName,
+        this.hour12
+      );
+    },
+    updateValue() {
+      let vm = this;
+      let dateValue = vm.$refs.dateField.$refs.input.value;
+      if (!dateValue) {
+        let v = new Date();
+        let fullYear = v.getFullYear();
+        let fullMonth = v.getMonth() + 1;
+        if (fullMonth < 10) {
+          fullMonth = "0" + fullMonth.toString();
+        }
+        let fullDay = v.getDate();
+        if (fullDay < 10) {
+          fullDay = "0" + fullDay.toString();
+        }
+        dateValue = fullYear + "-" + fullMonth + "-" + fullDay;
+      }
+
+      let timeValue = window.$gz.locale.utcDateStringToLocal8601TimeOnlyString(
+        vm.value,
+        vm.timeZoneName
+      );
+      if (!timeValue) {
+        timeValue = "00:00:00";
+      }
+
+      let ret = window.$gz.locale.localTimeDateStringToUTC8601String(
+        dateValue + "T" + timeValue,
+        vm.timeZoneName
+      );
+      vm.$emit("input", ret);
+    }
+  }
+};
+</script>
diff --git a/ayanova/src/components/date-non-native-control.vue b/ayanova/src/components/date-non-native-control.vue
deleted file mode 100644
index 9145996f..00000000
--- a/ayanova/src/components/date-non-native-control.vue
+++ /dev/null
@@ -1,157 +0,0 @@
-<template>
-  <div>
-    <v-row v-if="!readonly">
-      <v-col cols="12">
-        <v-dialog v-model="dlgdate" persistent width="290px">
-          <template v-slot:activator="{ on }">
-            <v-text-field
-              v-on="on"
-              prepend-icon="$ayiCalendarAlt"
-              @click:prepend="dlgdate = true"
-              v-model="formatDate"
-              v-bind:label="label"
-              v-bind:rules="rules"
-              readonly
-              :error="!!error"
-            ></v-text-field>
-          </template>
-          <v-date-picker :locale="defaultLocale" v-model="dateOnly">
-            <v-spacer></v-spacer>
-            <v-btn text color="primary" @click="dlgdate = false">{{
-              $ay.t("OK")
-            }}</v-btn>
-          </v-date-picker>
-        </v-dialog>
-      </v-col>
-    </v-row>
-    <v-text-field
-      v-if="readonly"
-      v-model="formatDateTime"
-      v-bind:label="label"
-      prepend-icon="$ayiCalendarAlt"
-      disabled
-    ></v-text-field>
-    <p v-show="error" class="form__error v-messages theme--light error--text">
-      {{ error }}
-    </p>
-  </div>
-</template>
-<script>
-/*  Xeslint-disable */
-//******************************** NOTE: this control also captures the TIME even though it's DATE only, this is an intentional design decision to support field change to date or date AND time and is considered a display issue */
-export default {
-  data: () => ({
-    date: null,
-    oldDate: null,
-    dlgdate: false,
-    //cache display format stuff
-    timeZoneName: window.$gz.locale.getBrowserTimeZoneName(),
-    languageName: window.$gz.locale.getBrowserLanguages(),
-    defaultLocale: window.$gz.locale.getBrowserFirstLanguage().split("-", 1)[0]
-  }),
-  props: {
-    label: String,
-    rules: Array,
-    value: String,
-    readonly: { type: Boolean, default: false },
-    error: {
-      type: String,
-      required: false
-    }
-  },
-  watch: {
-    date() {
-      //this tortuous fuckery is required so that the input and change events only fire on a real change, not initial page load
-      //also it shouldn't signal a change if the values are the same and nothing was effectively changed
-      let hasChanged = false;
-      if (this.date != this.oldDate) {
-        hasChanged = true;
-      }
-      this.oldDate = this.date;
-      if (hasChanged) {
-        this.$emit("input", this.date); //always in UTC
-      }
-    },
-    value() {
-      this.date = this.value; //always in UTC
-    }
-  },
-  computed: {
-    formatDateTime() {
-      return window.$gz.locale.utcDateToShortDateAndTimeLocalized(
-        this.value,
-        this.timeZoneName,
-        this.languageName,
-        this.hour12
-      );
-    },
-    formatDate() {
-      return window.$gz.locale.utcDateToShortDateLocalized(
-        this.value,
-        this.timeZoneName,
-        this.languageName
-      );
-    },
-    formatTime() {
-      return window.$gz.locale.utcDateToShortTimeLocalized(
-        this.value,
-        this.timeZoneName,
-        this.languageName,
-        this.hour12
-      );
-    },
-    dateOnly: {
-      get() {
-        //return date only portion converted to local working time zone: YYYY-MM-DD
-        return window.$gz.locale.utcDateStringToLocal8601DateOnlyString(
-          this.value,
-          this.timeZoneName
-        );
-      },
-      set(value) {
-        //2017-08-15T12:10:34.4443084+03:00
-        let TimePortion = this.timeOnly;
-        if (!TimePortion) {
-          TimePortion = "00:00:00";
-        }
-        this.date = window.$gz.locale.localTimeDateStringToUTC8601String(
-          value + "T" + TimePortion,
-          this.timeZoneName
-        );
-      }
-    },
-    timeOnly: {
-      //expects just the hours minutes seconds portion: 18:18:49
-      //Needs to convert into and out of the desired time zone or the control will show the UTC time instead
-      get() {
-        return window.$gz.locale.utcDateStringToLocal8601TimeOnlyString(
-          this.value,
-          this.timeZoneName
-        );
-      },
-      set(value) {
-        let DatePortion = this.dateOnly;
-        if (!DatePortion) {
-          let v = new Date();
-          let fullYear = v.getFullYear();
-          let fullMonth = v.getMonth() + 1;
-          if (fullMonth < 10) {
-            fullMonth = "0" + fullMonth.toString();
-          }
-          let fullDay = v.getDate();
-          if (fullDay < 10) {
-            fullDay = "0" + fullDay.toString();
-          }
-
-          DatePortion = fullYear + "-" + fullMonth + "-" + fullDay;
-        }
-
-        this.date = window.$gz.locale.localTimeDateStringToUTC8601String(
-          DatePortion + "T" + value,
-          this.timeZoneName
-        );
-      }
-    }
-  }
-};
-</script>
diff --git a/ayanova/src/components/time-control.vue b/ayanova/src/components/time-control.vue
index 7966b81e..bd7e7218 100644
--- a/ayanova/src/components/time-control.vue
+++ b/ayanova/src/components/time-control.vue
@@ -1,73 +1,97 @@
 <template>
   <div>
-    <template v-if="!readonly">
-      <v-text-field
-        ref="timeField"
-        :value="timeValue"
-        @change="updateValue()"
-        :readonly="readonly"
-        :disabled="disabled"
-        :label="label"
-        :rules="rules"
-        :error-messages="allErrors()"
-        type="time"
-        :data-cy="'timeinput:' + testId"
-      ></v-text-field>
-    </template>
-    <template v-else>
-      <v-text-field
-        :value="readonlyFormat()"
-        :label="label"
-        readonly
-        disabled
-      ></v-text-field>
-    </template>
+    <v-row v-if="!readonly">
+      <v-col cols="12">
+        <v-dialog v-model="dlgtime" persistent width="290px">
+          <template v-slot:activator="{ on }">
+            <v-text-field
+              v-on="on"
+              v-model="formatTime"
+              v-bind:label="label"
+              prepend-icon="$ayiClock"
+              @click:prepend="dlgtime = true"
+              readonly
+              :error="!!error"
+            ></v-text-field>
+          </template>
+          <v-time-picker
+            scrollable
+            ampm-in-title
+            :format="hour12 ? 'ampm' : '24hr'"
+            v-model="timeOnly"
+          >
+            <v-spacer></v-spacer>
+            <v-btn text color="primary" @click="dlgtime = false">{{
+              $ay.t("OK")
+            }}</v-btn>
+          </v-time-picker>
+        </v-dialog>
+      </v-col>
+    </v-row>
+    <v-text-field
+      v-if="readonly"
+      v-model="formatDateTime"
+      v-bind:label="label"
+      prepend-icon="$ayiCalendarAlt"
+      disabled
+    ></v-text-field>
+    <p v-show="error" class="form__error v-messages theme--light error--text">
+      {{ error }}
+    </p>
   </div>
 </template>
-
 <script>
-//==========================================
-//==========================================
+/*  Xeslint-disable */
+//******************************** NOTE: this control also captures the date even though it's time only, this is an intentional design decision to support field change to date or date AND time and is considered a display issue */
 export default {
-  data() {
-    return {
-      timeZoneName: window.$gz.locale.getBrowserTimeZoneName()
-    };
-  },
-
+  data: () => ({
+    date: null,
+    oldDate: null,
+    dlgtime: false,
+    //cache display format stuff
+    timeZoneName: window.$gz.locale.getBrowserTimeZoneName(),
+    languageName: window.$gz.locale.getBrowserLanguages(),
+    hour12: window.$gz.locale.getHour12(),
+    defaultLocale: window.$gz.locale.getBrowserFirstLanguage().split("-", 1)[0]
+  }),
   props: {
     label: String,
     rules: Array,
-    "error-messages": { type: Array, default: null },
-    value: { type: String, default: null },
+    value: String,
     readonly: { type: Boolean, default: false },
-    disabled: { type: Boolean, default: false },
     error: {
       type: String,
       required: false
-    },
-    testId: String
-  },
-  computed: {
-    timeValue() {
-      return window.$gz.locale.utcDateStringToLocal8601TimeOnlyString(
-        this.value,
-        this.timeZoneName
-      );
     }
   },
-  methods: {
-    allErrors() {
-      let ret = "";
-      if (this.error != null) {
-        ret = this.error;
+  watch: {
+    date() {
+      //this tortuous fuckery is required so that the input and change events only fire on a real change, not initial page load
+      //also it shouldn't signal a change if the values are the same and nothing was effectively changed
+      let hasChanged = false;
+      if (this.date != this.oldDate) {
+        hasChanged = true;
       }
-      if (this.errorMessages != null && this.errorMessages.length > 0) {
-        ret += this.errorMessages.toString();
+      this.oldDate = this.date;
+      if (hasChanged) {
+        this.$emit("input", this.date); //always in UTC
+        //this.$emit("change", this.date); //always in UTC
       }
-      return ret;
     },
-    readonlyFormat() {
+    value() {
+      this.date = this.value; //always in UTC
+    }
+  },
+  computed: {
+    formatDateTime() {
+      return window.$gz.locale.utcDateToShortDateAndTimeLocalized(
+        this.value,
+        this.timeZoneName,
+        this.languageName,
+        this.hour12
+      );
+    },
+    formatTime() {
       return window.$gz.locale.utcDateToShortTimeLocalized(
         this.value,
         this.timeZoneName,
@@ -75,36 +99,57 @@ export default {
         this.hour12
       );
     },
-    updateValue() {
-      let vm = this;
-      let dateValue = window.$gz.locale.utcDateStringToLocal8601DateOnlyString(
-        vm.value,
-        vm.timeZoneName
-      );
-      if (!dateValue) {
-        let v = new Date();
-        let fullYear = v.getFullYear();
-        let fullMonth = v.getMonth() + 1;
-        if (fullMonth < 10) {
-          fullMonth = "0" + fullMonth.toString();
+    dateOnly: {
+      get() {
+        //return date only portion converted to local working time zone: YYYY-MM-DD
+        return window.$gz.locale.utcDateStringToLocal8601DateOnlyString(
+          this.value,
+          this.timeZoneName
+        );
+      },
+      set(value) {
+        //2017-08-15T12:10:34.4443084+03:00
+        let TimePortion = this.timeOnly;
+        if (!TimePortion) {
+          TimePortion = "00:00:00";
         }
-        let fullDay = v.getDate();
-        if (fullDay < 10) {
-          fullDay = "0" + fullDay.toString();
+        this.date = window.$gz.locale.localTimeDateStringToUTC8601String(
+          value + "T" + TimePortion,
+          this.timeZoneName
+        );
+      }
+    },
+    timeOnly: {
+      //expects just the hours minutes seconds portion: 18:18:49
+      //Needs to convert into and out of the desired time zone or the control will show the UTC time instead
+      get() {
+        return window.$gz.locale.utcDateStringToLocal8601TimeOnlyString(
+          this.value,
+          this.timeZoneName
+        );
+      },
+      set(value) {
+        let DatePortion = this.dateOnly;
+        if (!DatePortion) {
+          let v = new Date();
+          let fullYear = v.getFullYear();
+          let fullMonth = v.getMonth() + 1;
+          if (fullMonth < 10) {
+            fullMonth = "0" + fullMonth.toString();
+          }
+          let fullDay = v.getDate();
+          if (fullDay < 10) {
+            fullDay = "0" + fullDay.toString();
+          }
+
+          DatePortion = fullYear + "-" + fullMonth + "-" + fullDay;
         }
-        dateValue = fullYear + "-" + fullMonth + "-" + fullDay;
-      }
 
-      let timeValue = vm.$refs.timeField.$refs.input.value;
-      if (!timeValue) {
-        timeValue = "00:00:00";
+        this.date = window.$gz.locale.localTimeDateStringToUTC8601String(
+          DatePortion + "T" + value,
+          this.timeZoneName
+        );
       }
-
-      let ret = window.$gz.locale.localTimeDateStringToUTC8601String(
-        dateValue + "T" + timeValue,
-        vm.timeZoneName
-      );
-      vm.$emit("input", ret);
     }
   }
 };
diff --git a/ayanova/src/components/time-native-control.vue b/ayanova/src/components/time-native-control.vue
new file mode 100644
index 00000000..7966b81e
--- /dev/null
+++ b/ayanova/src/components/time-native-control.vue
@@ -0,0 +1,111 @@
+<template>
+  <div>
+    <template v-if="!readonly">
+      <v-text-field
+        ref="timeField"
+        :value="timeValue"
+        @change="updateValue()"
+        :readonly="readonly"
+        :disabled="disabled"
+        :label="label"
+        :rules="rules"
+        :error-messages="allErrors()"
+        type="time"
+        :data-cy="'timeinput:' + testId"
+      ></v-text-field>
+    </template>
+    <template v-else>
+      <v-text-field
+        :value="readonlyFormat()"
+        :label="label"
+        readonly
+        disabled
+      ></v-text-field>
+    </template>
+  </div>
+</template>
+
+<script>
+//==========================================
+//==========================================
+export default {
+  data() {
+    return {
+      timeZoneName: window.$gz.locale.getBrowserTimeZoneName()
+    };
+  },
+
+  props: {
+    label: String,
+    rules: Array,
+    "error-messages": { type: Array, default: null },
+    value: { type: String, default: null },
+    readonly: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    error: {
+      type: String,
+      required: false
+    },
+    testId: String
+  },
+  computed: {
+    timeValue() {
+      return window.$gz.locale.utcDateStringToLocal8601TimeOnlyString(
+        this.value,
+        this.timeZoneName
+      );
+    }
+  },
+  methods: {
+    allErrors() {
+      let ret = "";
+      if (this.error != null) {
+        ret = this.error;
+      }
+      if (this.errorMessages != null && this.errorMessages.length > 0) {
+        ret += this.errorMessages.toString();
+      }
+      return ret;
+    },
+    readonlyFormat() {
+      return window.$gz.locale.utcDateToShortTimeLocalized(
+        this.value,
+        this.timeZoneName,
+        this.languageName,
+        this.hour12
+      );
+    },
+    updateValue() {
+      let vm = this;
+      let dateValue = window.$gz.locale.utcDateStringToLocal8601DateOnlyString(
+        vm.value,
+        vm.timeZoneName
+      );
+      if (!dateValue) {
+        let v = new Date();
+        let fullYear = v.getFullYear();
+        let fullMonth = v.getMonth() + 1;
+        if (fullMonth < 10) {
+          fullMonth = "0" + fullMonth.toString();
+        }
+        let fullDay = v.getDate();
+        if (fullDay < 10) {
+          fullDay = "0" + fullDay.toString();
+        }
+        dateValue = fullYear + "-" + fullMonth + "-" + fullDay;
+      }
+
+      let timeValue = vm.$refs.timeField.$refs.input.value;
+      if (!timeValue) {
+        timeValue = "00:00:00";
+      }
+
+      let ret = window.$gz.locale.localTimeDateStringToUTC8601String(
+        dateValue + "T" + timeValue,
+        vm.timeZoneName
+      );
+      vm.$emit("input", ret);
+    }
+  }
+};
+</script>
diff --git a/ayanova/src/components/time-non-native-control.vue b/ayanova/src/components/time-non-native-control.vue
deleted file mode 100644
index bd7e7218..00000000
--- a/ayanova/src/components/time-non-native-control.vue
+++ /dev/null
@@ -1,156 +0,0 @@
-<template>
-  <div>
-    <v-row v-if="!readonly">
-      <v-col cols="12">
-        <v-dialog v-model="dlgtime" persistent width="290px">
-          <template v-slot:activator="{ on }">
-            <v-text-field
-              v-on="on"
-              v-model="formatTime"
-              v-bind:label="label"
-              prepend-icon="$ayiClock"
-              @click:prepend="dlgtime = true"
-              readonly
-              :error="!!error"
-            ></v-text-field>
-          </template>
-          <v-time-picker
-            scrollable
-            ampm-in-title
-            :format="hour12 ? 'ampm' : '24hr'"
-            v-model="timeOnly"
-          >
-            <v-spacer></v-spacer>
-            <v-btn text color="primary" @click="dlgtime = false">{{
-              $ay.t("OK")
-            }}</v-btn>
-          </v-time-picker>
-        </v-dialog>
-      </v-col>
-    </v-row>
-    <v-text-field
-      v-if="readonly"
-      v-model="formatDateTime"
-      v-bind:label="label"
-      prepend-icon="$ayiCalendarAlt"
-      disabled
-    ></v-text-field>
-    <p v-show="error" class="form__error v-messages theme--light error--text">
-      {{ error }}
-    </p>
-  </div>
-</template>
-<script>
-/*  Xeslint-disable */
-//******************************** NOTE: this control also captures the date even though it's time only, this is an intentional design decision to support field change to date or date AND time and is considered a display issue */
-export default {
-  data: () => ({
-    date: null,
-    oldDate: null,
-    dlgtime: false,
-    //cache display format stuff
-    timeZoneName: window.$gz.locale.getBrowserTimeZoneName(),
-    languageName: window.$gz.locale.getBrowserLanguages(),
-    hour12: window.$gz.locale.getHour12(),
-    defaultLocale: window.$gz.locale.getBrowserFirstLanguage().split("-", 1)[0]
-  }),
-  props: {
-    label: String,
-    rules: Array,
-    value: String,
-    readonly: { type: Boolean, default: false },
-    error: {
-      type: String,
-      required: false
-    }
-  },
-  watch: {
-    date() {
-      //this tortuous fuckery is required so that the input and change events only fire on a real change, not initial page load
-      //also it shouldn't signal a change if the values are the same and nothing was effectively changed
-      let hasChanged = false;
-      if (this.date != this.oldDate) {
-        hasChanged = true;
-      }
-      this.oldDate = this.date;
-      if (hasChanged) {
-        this.$emit("input", this.date); //always in UTC
-        //this.$emit("change", this.date); //always in UTC
-      }
-    },
-    value() {
-      this.date = this.value; //always in UTC
-    }
-  },
-  computed: {
-    formatDateTime() {
-      return window.$gz.locale.utcDateToShortDateAndTimeLocalized(
-        this.value,
-        this.timeZoneName,
-        this.languageName,
-        this.hour12
-      );
-    },
-    formatTime() {
-      return window.$gz.locale.utcDateToShortTimeLocalized(
-        this.value,
-        this.timeZoneName,
-        this.languageName,
-        this.hour12
-      );
-    },
-    dateOnly: {
-      get() {
-        //return date only portion converted to local working time zone: YYYY-MM-DD
-        return window.$gz.locale.utcDateStringToLocal8601DateOnlyString(
-          this.value,
-          this.timeZoneName
-        );
-      },
-      set(value) {
-        //2017-08-15T12:10:34.4443084+03:00
-        let TimePortion = this.timeOnly;
-        if (!TimePortion) {
-          TimePortion = "00:00:00";
-        }
-        this.date = window.$gz.locale.localTimeDateStringToUTC8601String(
-          value + "T" + TimePortion,
-          this.timeZoneName
-        );
-      }
-    },
-    timeOnly: {
-      //expects just the hours minutes seconds portion: 18:18:49
-      //Needs to convert into and out of the desired time zone or the control will show the UTC time instead
-      get() {
-        return window.$gz.locale.utcDateStringToLocal8601TimeOnlyString(
-          this.value,
-          this.timeZoneName
-        );
-      },
-      set(value) {
-        let DatePortion = this.dateOnly;
-        if (!DatePortion) {
-          let v = new Date();
-          let fullYear = v.getFullYear();
-          let fullMonth = v.getMonth() + 1;
-          if (fullMonth < 10) {
-            fullMonth = "0" + fullMonth.toString();
-          }
-          let fullDay = v.getDate();
-          if (fullDay < 10) {
-            fullDay = "0" + fullDay.toString();
-          }
-
-          DatePortion = fullYear + "-" + fullMonth + "-" + fullDay;
-        }
-
-        this.date = window.$gz.locale.localTimeDateStringToUTC8601String(
-          DatePortion + "T" + value,
-          this.timeZoneName
-        );
-      }
-    }
-  }
-};
-</script>