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

@@ -1,33 +1,38 @@
 <template>
   <div>
-    <!-- <div>
-      Value:{{ value }}, dateValue: {{ dateValue }}, timeValue: {{ timeValue }}
-    </div> -->
-    <v-text-field
-      ref="dateField"
-      :value="dateControlFormat()"
-      @input="handleDateInput"
-      :readonly="readonly"
-      :disabled="disabled"
-      :label="label"
-      :rules="rules"
-      type="date"
-    ></v-text-field>
-
-    <v-text-field
-      ref="timeField"
-      :value="timeControlFormat()"
-      @input="handleTimeInput"
-      :readonly="readonly"
-      :disabled="disabled"
-      :label="label"
-      :rules="rules"
-      type="time"
-    ></v-text-field>
-
-    <p v-show="error" class="form__error v-messages theme--light error--text">
-      {{ error }}
-    </p>
+    <v-row>
+      {{ internalValue }}
+      <v-col cols="6">
+        <v-text-field
+          ref="dateField"
+          :value="dateControlFormat()"
+          @input="handleDateInput"
+          :readonly="readonly"
+          :disabled="disabled"
+          :label="label"
+          :rules="rules"
+          type="date"
+        ></v-text-field>
+      </v-col>
+      <v-col cols="6">
+        <v-text-field
+          ref="timeField"
+          :value="timeControlFormat()"
+          @input="handleTimeInput"
+          :readonly="readonly"
+          :disabled="disabled"
+          type="time"
+        ></v-text-field>
+      </v-col>
+      <v-col cols="12">
+        <p
+          v-show="error"
+          class="form__error v-messages theme--light error--text"
+        >
+          {{ error }}
+        </p>
+      </v-col>
+    </v-row>
   </div>
 </template>
 <script>
@@ -81,68 +86,45 @@ export default {
       );
     },
     handleDateInput(value) {
-      console.log("handle date input called with ", value);
-      //   //combine the time and dates into a consolidated value
-      //   let TimePortion = this.timeValue;
-      //   if (!TimePortion) {
-      //     TimePortion = "00:00:00";
-      //   }
+      //combine the time and dates into a consolidated value
+      let TimePortion = window.$gz.locale.utcDateStringToLocal8601TimeOnlyString(
+        this.internalValue,
+        this.timeZoneName
+      );
+      let newValue = window.$gz.locale.localTimeDateStringToUTC8601String(
+        value + "T" + TimePortion,
+        this.timeZoneName
+      );
 
-      //   let DatePortion = this.dateValue;
-      //   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;
-      //   }
-
-      //   let fullValue = window.$gz.locale.localTimeDateStringToUTC8601String(
-      //     DatePortion + "T" + value,
-      //     this.timeZoneName
-      //   );
-      //   console.log("handle input emitting ", fullValue);
-      //   this.$emit("input", fullValue);
-      //   // this.internalValue = value;
-      //   // this.formattedValue = value;
+      this.$emit("input", newValue);
     },
     handleTimeInput(value) {
       console.log("handle time input called with ", value);
-      //   //combine the time and dates into a consolidated value
-      //   let TimePortion = this.timeValue;
-      //   if (!TimePortion) {
-      //     TimePortion = "00:00:00";
-      //   }
+      let DatePortion = window.$gz.locale.utcDateStringToLocal8601DateOnlyString(
+        this.internalValue,
+        this.timeZoneName
+      );
+      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();
+        }
 
-      //   let DatePortion = this.dateValue;
-      //   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;
+      }
 
-      //     DatePortion = fullYear + "-" + fullMonth + "-" + fullDay;
-      //   }
-
-      //   let fullValue = window.$gz.locale.localTimeDateStringToUTC8601String(
-      //     DatePortion + "T" + value,
-      //     this.timeZoneName
-      //   );
-      //   console.log("handle input emitting ", fullValue);
-      //   this.$emit("input", fullValue);
+      let newValue = window.$gz.locale.localTimeDateStringToUTC8601String(
+        DatePortion + "T" + value,
+        this.timeZoneName
+      );
+      //console.log("handle input emitting ", newValue);
+      this.$emit("input", newValue);
       //   // this.internalValue = value;
       //   // this.formattedValue = value;
     }