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

@@ -0,0 +1,151 @@
+<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>
+  </div>
+</template>
+<script>
+/*  Xeslint-disable */
+export default {
+  data() {
+    return {
+      internalValue: null,
+      timeZoneName: window.$gz.locale.getBrowserTimeZoneName(),
+      languageName: window.$gz.locale.getBrowserLanguages(),
+      hour12: window.$gz.locale.getHour12()
+    };
+  },
+  watch: {
+    // internalValue(value) {
+    //   setValue(this.$refs.textField.$refs.input, value);
+    // }
+    value(val) {
+      //   console.log("watch:value val is ", val);
+      //   console.log("watch:value this.dateValue is ", this.dateValue);
+      this.internalValue = val;
+      //   console.log("aft watch:value val is ", val);
+      //   console.log("aft watch:value this.dateValue is ", this.dateValue);
+      // this.timeValue = this.value;
+    }
+  },
+  props: {
+    label: String,
+    rules: Array,
+    value: { type: String, default: null },
+    readonly: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    error: {
+      type: String,
+      required: false
+    }
+  },
+  methods: {
+    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) {
+      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";
+      //   }
+
+      //   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;
+    },
+    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 = 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;
+    }
+  }
+};
+</script>

ayanova/src/main.js

@@ -35,6 +35,7 @@ import "@/assets/css/main.css";
 
 //controls
 import dateTimeControl from "./components/date-time-control.vue";
+import dateTimeControl2 from "./components/date-time-v2-control.vue";
 import dateControl from "./components/date-control.vue";
 import timeControl from "./components/time-control.vue";
 import tagPicker from "./components/tag-picker.vue";
@@ -172,6 +173,7 @@ document.addEventListener("fetchEnd", function() {
 //GZ COMPONENTS
 //
 Vue.component("gz-date-time-picker", dateTimeControl);
+Vue.component("gz-date-time-2-picker", dateTimeControl2);
 Vue.component("gz-date-picker", dateControl);
 Vue.component("gz-time-picker", timeControl);
 Vue.component("gz-tag-picker", tagPicker);

ayanova/src/views/widget.vue

@@ -88,7 +88,7 @@
             </v-col>
 
             <v-col cols="12" sm="6" lg="4" xl="3">
-              <gz-date-time-picker
+              <gz-date-time-2-picker
                 :label="$ay.t('WidgetStartDate')"
                 v-model="obj.startDate"
                 :readonly="formState.readOnly"
@@ -97,7 +97,7 @@
                 testId="startDate"
                 :error-messages="form().serverErrors(this, 'startDate')"
                 @input="fieldValueChanged('startDate')"
-              ></gz-date-time-picker>
+              ></gz-date-time-2-picker>
             </v-col>
 
             <v-col cols="12" sm="6" lg="4" xl="3">