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

@@ -4,8 +4,8 @@
       <v-col cols="6">
         <v-text-field
           ref="dateField"
-          :value="dateControlFormat()"
-          @input="handleDateInput"
+          :value="splitValue.date"
+          @input="updateValue()"
           :readonly="readonly"
           :disabled="disabled"
           :label="label"
@@ -18,8 +18,8 @@
       <v-col cols="6">
         <v-text-field
           ref="timeField"
-          :value="timeControlFormat()"
-          @input="handleTimeInput"
+          :value="splitValue.time"
+          @input="updateValue()"
           :readonly="readonly"
           :disabled="disabled"
           type="time"
@@ -43,15 +43,10 @@
 export default {
   data() {
     return {
-      internalValue: null,
       timeZoneName: window.$gz.locale.getBrowserTimeZoneName()
     };
   },
-  watch: {
-    value(val) {
-      this.internalValue = val;
-    }
-  },
+
   props: {
     label: String,
     rules: Array,
@@ -65,6 +60,20 @@ export default {
     },
     testId: String
   },
+  computed: {
+    splitValue() {
+      return {
+        date: window.$gz.locale.utcDateStringToLocal8601DateOnlyString(
+          this.value,
+          this.timeZoneName
+        ),
+        time: window.$gz.locale.utcDateStringToLocal8601TimeOnlyString(
+          this.value,
+          this.timeZoneName
+        )
+      };
+    }
+  },
   methods: {
     allErrors() {
       let ret = "";
@@ -84,40 +93,20 @@ export default {
         this.hour12
       );
     },
-    dateControlFormat() {
-      //yyyy-mm-dd
-      return window.$gz.locale.utcDateStringToLocal8601DateOnlyString(
-        this.internalValue,
-        this.timeZoneName
-      );
-    },
-    timeControlFormat() {
-      //hh:mm:ss in 24 hour format
-      return window.$gz.locale.utcDateStringToLocal8601TimeOnlyString(
-        this.internalValue,
-        this.timeZoneName
-      );
-    },
-    handleDateInput(value) {
-      //combine the time and dates into a consolidated value
-      let TimePortion = window.$gz.locale.utcDateStringToLocal8601TimeOnlyString(
-        this.internalValue,
-        this.timeZoneName
-      );
-      if (!TimePortion) {
-        TimePortion = "00:00:00";
-      }
-      let newValue = window.$gz.locale.localTimeDateStringToUTC8601String(
-        value + "T" + TimePortion,
-        this.timeZoneName
-      );
-      this.$emit("input", newValue);
-    },
-    handleTimeInput(value) {
-      let DatePortion = window.$gz.locale.utcDateStringToLocal8601DateOnlyString(
-        this.internalValue,
-        this.timeZoneName
+    updateValue() {
+      let vm = this;
+
+      let dateValue = vm.$refs.dateField.$refs.input.value;
+      console.log(
+        "date-time-control::updateValue var datevalue is:",
+        dateValue
       );
+      // let DatePortion = window.$gz.locale.utcDateStringToLocal8601DateOnlyString(
+      //   dateValue,
+      //   vm.timeZoneName
+      // );
+      let DatePortion = dateValue;
+
       if (!DatePortion) {
         let v = new Date();
         let fullYear = v.getFullYear();
@@ -131,11 +120,32 @@ export default {
         }
         DatePortion = fullYear + "-" + fullMonth + "-" + fullDay;
       }
-      let newValue = window.$gz.locale.localTimeDateStringToUTC8601String(
-        DatePortion + "T" + value,
+
+      let timeValue = vm.$refs.timeField.$refs.input.value;
+      console.log(
+        "date-time-control::updateValue var timevalue is:",
+        timeValue
+      );
+      // let TimePortion = window.$gz.locale.utcDateStringToLocal8601TimeOnlyString(
+      //   timeValue,
+      //   vm.timeZoneName
+      // );
+      let TimePortion = timeValue;
+      if (!TimePortion) {
+        TimePortion = "00:00:00";
+      }
+
+      // console.log(
+      //   "date-time-control::updateValue var timeportion is:",
+      //   TimePortion
+      // );
+
+      let ret = window.$gz.locale.localTimeDateStringToUTC8601String(
+        DatePortion + "T" + TimePortion,
         this.timeZoneName
       );
-      this.$emit("input", newValue);
+      console.log("date-time-control::updateValue emitting:", ret);
+      this.$emit("input", ret);
     }
   }
 };