diff --git a/ayanova/src/components/gzdateandtimepicker.vue b/ayanova/src/components/gzdateandtimepicker.vue
index 4af2fcca..071bfa3e 100644
--- a/ayanova/src/components/gzdateandtimepicker.vue
+++ b/ayanova/src/components/gzdateandtimepicker.vue
@@ -42,6 +42,9 @@
 <script>
 /*  eslint-disable */
 export default {
+  beforeCreate() {
+    console.log("Nothing gets called before me!");
+  },
   data: () => ({ date: null, modal: false, modal2: false }),
   props: {
     label: String,
@@ -52,52 +55,56 @@ export default {
   },
   watch: {
     date() {
-      this.$emit("input", this.date);
+      this.$emit("input", this.date); //always in UTC
     },
     value() {
-      this.date = this.value;
+      this.date = this.value; //always in UTC
     }
   },
   computed: {
-    formatDateTime() {      
-      //debugger;
+    formatDateTime() {
       return this.value
-        ? this.$dayjs(this.value).add(this.locale.timeZoneOffset, "hour").format(this.locale.formats.shortDateAndTime)
+        ? this.$dayjs(this.value)
+            .add(this.locale.timeZoneOffset, "hour")
+            .format(this.locale.formats.shortDateAndTime)
         : "";
     },
     formatDate() {
       return this.value
-        ? this.$dayjs(this.value).add(this.locale.timeZoneOffset, "hour").format(this.locale.formats.shortDate)
+        ? this.$dayjs(this.value)
+            .add(this.locale.timeZoneOffset, "hour")
+            .format(this.locale.formats.shortDate)
         : "";
     },
     formatTime() {
-      //debugger;
       return this.value
         ? this.$dayjs(this.value)
             .add(this.locale.timeZoneOffset, "hour")
             .format(this.locale.formats.shortTime)
-        : "";     
+        : "";
     },
     dateOnly: {
       get() {
-        return this.$dayjs(this.value).add(this.locale.timeZoneOffset, "hour").format("YYYY-MM-DD");
-        //return this.value ? this.value.substr(0, 10) : null;
+        return this.$dayjs(this.value)
+          .add(this.locale.timeZoneOffset, "hour")
+          .format("YYYY-MM-DD");
       },
       set(value) {
-        //this .date is always utc so convert back here before setting or all hell will break loose!
-        this.date = this.$dayjs(value + " " + this.timeOnly).subtract(this.locale.timeZoneOffset, "hour").toISOString();
-        //this.date = value + " " + this.timeOnly;
+        this.date = this.$dayjs(value + " " + this.timeOnly)
+          .subtract(this.locale.timeZoneOffset, "hour")
+          .toISOString();
       }
     },
     timeOnly: {
       get() {
-        return this.$dayjs(this.value).add(this.locale.timeZoneOffset, "hour").format("HH:mm:ss");
-        //return this.value ? this.value.substr(11, 8) : null;
+        return this.$dayjs(this.value)
+          .add(this.locale.timeZoneOffset, "hour")
+          .format("HH:mm:ss");
       },
       set(value) {
-        //debugger;
-        //this .date is always utc so convert back here before setting or all hell will break loose!
-        this.date = this.$dayjs(this.dateOnly + " " + value).subtract(this.locale.timeZoneOffset, "hour").toISOString();
+        this.date = this.$dayjs(this.dateOnly + " " + value)
+          .subtract(this.locale.timeZoneOffset, "hour")
+          .toISOString();
       }
     }
   }
@@ -105,6 +112,11 @@ export default {
 </script>
 
 <!--
+
+NOTE: this component was created based on a reddit query and answer below.
+Note also that the date and time coming in to this component are expected to be an ISO8601 format date and time string in UTC
+and it's kept in UTC and only localized temporarily for display and selection and update after selection in the date and time picker components
+
 re: combined date/time component
 
 from theRetrograde sent 4 hours ago