ayanova/devdocs/todo.txt

@@ -8,9 +8,7 @@ WIFI change 5g channel to 52,56,60 and 2g channel to 8
 
 todo: datetime should support keyboard entry if typing
 
-todo: server error not displaying properly for broken rules?
+todo: useroptions hour12 maybe not a thing anymore now that using native time picker?
-	widget start date invalid format or missing I guess was the issue but no feedback
-	{"error":{"code":"2200","details":[{"target":"StartDate","error":"2201"}],"message":"Object did not pass validation"}}
 
 todo: if dbid in url query parameter of contact form on server it should include that in the message
 	also something needs to be fixed there, it's been in notes forever

ayanova/src/components/date-control.vue

@@ -1,156 +1,76 @@
 <template>
-  <div>
+  <v-text-field
-    <v-row v-if="!readonly">
+    ref="dateField"
-      <v-col cols="12">
+    :value="dateControlFormat()"
-        <v-dialog v-model="dlgdate" persistent width="290px">
+    @input="handleDateInput"
-          <template v-slot:activator="{ on }">
+    :readonly="readonly"
-            <v-text-field
+    :disabled="disabled"
-              v-on="on"
+    :label="label"
-              prepend-icon="fa-calendar-alt"
+    :rules="rules"
-              @click:prepend="dlgdate = true"
+    type="date"
-              v-model="formatDate"
+    :error-messages="allErrors()"
-              v-bind:label="label"
+    :data-cy="!!$ay.dev ? 'dateinput:' + testId : false"
-              v-bind:rules="rules"
+  ></v-text-field>
-              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="fa-calendar-alt"
-      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: () => ({
+  data() {
-    date: null,
+    return {
-    oldDate: null,
+      internalValue: null,
-    dlgdate: false,
+      timeZoneName: window.$gz.locale.getBrowserTimeZoneName()
-    //cache display format stuff
+    };
-    timeZoneName: window.$gz.locale.getBrowserTimeZoneName(),
+  },
-    languageName: window.$gz.locale.getBrowserLanguages(),
+  watch: {
-    defaultLocale: window.$gz.locale.getBrowserFirstLanguage().split("-", 1)[0]
+    value(val) {
-  }),
+      this.internalValue = val;
+    }
+  },
   props: {
     label: String,
     rules: Array,
-    value: String,
+    "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
   },
-  watch: {
+  methods: {
-    date() {
+    allErrors() {
-      //this tortuous fuckery is required so that the input and change events only fire on a real change, not initial page load
+      let ret = "";
-      //also it shouldn't signal a change if the values are the same and nothing was effectively changed
+      if (this.error != null) {
-      let hasChanged = false;
+        ret = this.error;
-      if (this.date != this.oldDate) {
-        hasChanged = true;
       }
-      this.oldDate = this.date;
+      if (this.errorMessages != null && this.errorMessages.length > 0) {
-      if (hasChanged) {
+        ret += this.errorMessages.toString();
-        this.$emit("input", this.date); //always in UTC
       }
+      return ret;
     },
-    value() {
+    dateControlFormat() {
-      this.date = this.value; //always in UTC
+      //yyyy-mm-dd
-    }
+      return window.$gz.locale.utcDateStringToLocal8601DateOnlyString(
-  },
+        this.internalValue,
-  computed: {
+        this.timeZoneName
-    formatDateTime() {
-      return window.$gz.locale.utcDateToShortDateAndTimeLocalized(
-        this.value,
-        this.timeZoneName,
-        this.languageName,
-        this.hour12
       );
     },
-    formatDate() {
+    handleDateInput(value) {
-      return window.$gz.locale.utcDateToShortDateLocalized(
+      //combine the time and dates into a consolidated value
-        this.value,
+      let TimePortion = window.$gz.locale.utcDateStringToLocal8601TimeOnlyString(
-        this.timeZoneName,
+        this.internalValue,
-        this.languageName
+        this.timeZoneName
       );
-    },
+      if (!TimePortion) {
-    formatTime() {
+        TimePortion = "00:00:00";
-      return window.$gz.locale.utcDateToShortTimeLocalized(
+      }
-        this.value,
+      let newValue = window.$gz.locale.localTimeDateStringToUTC8601String(
-        this.timeZoneName,
+        value + "T" + TimePortion,
-        this.languageName,
+        this.timeZoneName
-        this.hour12
       );
-    },
+      this.$emit("input", newValue);
-    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
-        );
-      }
     }
   }
 };

ayanova/src/components/date-non-native-control.vue

@@ -0,0 +1,157 @@
+<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="fa-calendar-alt"
+              @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="fa-calendar-alt"
+      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>

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

@@ -1,202 +1,123 @@
 <template>
-  <div>
+  <v-row>
-    <v-row v-if="!readonly">
+    <v-col cols="6">
-      <v-col xs6>
+      <v-text-field
-        <v-dialog
+        ref="dateField"
-          ref="theDateDialog"
+        :value="dateControlFormat()"
-          v-model="dlgdate"
+        @input="handleDateInput"
-          persistent
+        :readonly="readonly"
-          width="290px"
+        :disabled="disabled"
-        >
+        :label="label"
-          <template v-slot:activator="{ on }">
+        :rules="rules"
-            <v-text-field
+        type="date"
-              v-on="on"
+        :error-messages="allErrors()"
-              prepend-icon="fa-calendar-alt"
+        :data-cy="!!$ay.dev ? 'dateinput:' + testId : false"
-              @click:prepend="dlgdate = true"
+      ></v-text-field>
-              v-model="formatDate"
+    </v-col>
-              v-bind:label="label"
+    <v-col cols="6">
-              v-bind:rules="rules"
+      <v-text-field
-              readonly
+        ref="timeField"
-              :error="!!error"
+        :value="timeControlFormat()"
-              :data-cy="!!$ay.dev ? 'dtfpick:' + testId : false"
+        @input="handleTimeInput"
-            ></v-text-field>
+        :readonly="readonly"
-          </template>
+        :disabled="disabled"
-          <v-date-picker
+        type="time"
-            v-model="dateOnly"
+        :data-cy="!!$ay.dev ? 'timeinput:' + testId : false"
-            @input="dlgdate = false"
+      ></v-text-field>
-            :locale="defaultLocale"
+    </v-col>
-            :data-cy="!!$ay.dev ? 'dpick:' + testId : false"
+  </v-row>
-          >
-            <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-col xs6>
-        <v-dialog
-          ref="theTimeDialog"
-          v-model="dlgtime"
-          persistent
-          width="290px"
-        >
-          <template v-slot:activator="{ on }">
-            <v-text-field
-              v-on="on"
-              v-model="formatTime"
-              label
-              prepend-icon="fa-clock"
-              @click:prepend="dlgtime = true"
-              readonly
-              :error="!!error"
-              :data-cy="!!$ay.dev ? 'ttfpick:' + testId : false"
-            ></v-text-field>
-          </template>
-          <v-time-picker
-            scrollable
-            ampm-in-title
-            :format="hour12 ? 'ampm' : '24hr'"
-            v-model="timeOnly"
-            :data-cy="!!$ay.dev ? 'tpick:' + testId : false"
-          >
-            <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="fa-calendar-alt"
-      disabled
-    ></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: () => ({
+  data() {
-    date: null,
+    return {
-    oldDate: null,
+      internalValue: null,
-    dlgdate: false,
+      timeZoneName: window.$gz.locale.getBrowserTimeZoneName()
-    dlgtime: false,
+    };
-    //cache display format stuff
+  },
-    timeZoneName: window.$gz.locale.getBrowserTimeZoneName(),
+  watch: {
-    languageName: window.$gz.locale.getBrowserLanguages(),
+    value(val) {
-    hour12: window.$gz.locale.getHour12(),
+      this.internalValue = val;
-    defaultLocale: window.$gz.locale.getBrowserFirstLanguage().split("-", 1)[0]
+    }
-  }),
+  },
   props: {
     label: String,
     rules: Array,
-    value: String,
+    "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
   },
-  watch: {
+  methods: {
-    date() {
+    allErrors() {
-      //this tortuous fuckery is required so that the input and change events only fire on a real change, not initial page load
+      let ret = "";
-      //also it shouldn't signal a change if the values are the same and nothing was effectively changed
+      if (this.error != null) {
-      let hasChanged = false;
+        ret = this.error;
-      if (this.date != this.oldDate) {
-        hasChanged = true;
       }
-      this.oldDate = this.date;
+      if (this.errorMessages != null && this.errorMessages.length > 0) {
-      if (hasChanged) {
+        ret += this.errorMessages.toString();
-        this.$emit("input", this.date); //always in UTC
       }
+      return ret;
     },
-    value() {
+    dateControlFormat() {
-      this.date = this.value; //always in UTC
+      //yyyy-mm-dd
-    }
+      return window.$gz.locale.utcDateStringToLocal8601DateOnlyString(
-  },
+        this.internalValue,
-  computed: {
+        this.timeZoneName
-    formatDateTime() {
-      return window.$gz.locale.utcDateToShortDateAndTimeLocalized(
-        this.value,
-        this.timeZoneName,
-        this.languageName,
-        this.hour12
       );
     },
-    formatDate() {
+    timeControlFormat() {
-      return window.$gz.locale.utcDateToShortDateLocalized(
+      //hh:mm:ss in 24 hour format
-        this.value,
+      return window.$gz.locale.utcDateStringToLocal8601TimeOnlyString(
-        this.timeZoneName,
+        this.internalValue,
-        this.languageName
+        this.timeZoneName
       );
     },
-    formatTime() {
+    handleDateInput(value) {
-      return window.$gz.locale.utcDateToShortTimeLocalized(
+      //combine the time and dates into a consolidated value
-        this.value,
+      let TimePortion = window.$gz.locale.utcDateStringToLocal8601TimeOnlyString(
-        this.timeZoneName,
+        this.internalValue,
-        this.languageName,
+        this.timeZoneName
-        this.hour12
       );
+      if (!TimePortion) {
+        TimePortion = "00:00:00";
+      }
+      let newValue = window.$gz.locale.localTimeDateStringToUTC8601String(
+        value + "T" + TimePortion,
+        this.timeZoneName
+      );
+      this.$emit("input", newValue);
     },
-    dateOnly: {
+    handleTimeInput(value) {
-      get() {
+      let DatePortion = window.$gz.locale.utcDateStringToLocal8601DateOnlyString(
-        //return date only portion converted to local working time zone: YYYY-MM-DD
+        this.internalValue,
-        return window.$gz.locale.utcDateStringToLocal8601DateOnlyString(
+        this.timeZoneName
-          this.value,
+      );
-          this.timeZoneName
+      if (!DatePortion) {
-        );
+        let v = new Date();
-      },
+        let fullYear = v.getFullYear();
-      set(value) {
+        let fullMonth = v.getMonth() + 1;
-        //2017-08-15T12:10:34.4443084+03:00
+        if (fullMonth < 10) {
-        let TimePortion = this.timeOnly;
+          fullMonth = "0" + fullMonth.toString();
-        if (!TimePortion) {
-          TimePortion = "00:00:00";
         }
-        this.date = window.$gz.locale.localTimeDateStringToUTC8601String(
+        let fullDay = v.getDate();
-          value + "T" + TimePortion,
+        if (fullDay < 10) {
-          this.timeZoneName
+          fullDay = "0" + fullDay.toString();
-        );
-      }
-    },
-    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;
         }
-
+        DatePortion = fullYear + "-" + fullMonth + "-" + fullDay;
-        this.date = window.$gz.locale.localTimeDateStringToUTC8601String(
-          DatePortion + "T" + value,
-          this.timeZoneName
-        );
       }
+      let newValue = window.$gz.locale.localTimeDateStringToUTC8601String(
+        DatePortion + "T" + value,
+        this.timeZoneName
+      );
+      this.$emit("input", newValue);
     }
   }
 };

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

@@ -0,0 +1,203 @@
+<template>
+  <div>
+    <v-row v-if="!readonly">
+      <v-col xs6>
+        <v-dialog
+          ref="theDateDialog"
+          v-model="dlgdate"
+          persistent
+          width="290px"
+        >
+          <template v-slot:activator="{ on }">
+            <v-text-field
+              v-on="on"
+              prepend-icon="fa-calendar-alt"
+              @click:prepend="dlgdate = true"
+              v-model="formatDate"
+              v-bind:label="label"
+              v-bind:rules="rules"
+              readonly
+              :error="!!error"
+              :data-cy="!!$ay.dev ? 'dtfpick:' + testId : false"
+            ></v-text-field>
+          </template>
+          <v-date-picker
+            v-model="dateOnly"
+            @input="dlgdate = false"
+            :locale="defaultLocale"
+            :data-cy="!!$ay.dev ? 'dpick:' + testId : false"
+          >
+            <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-col xs6>
+        <v-dialog
+          ref="theTimeDialog"
+          v-model="dlgtime"
+          persistent
+          width="290px"
+        >
+          <template v-slot:activator="{ on }">
+            <v-text-field
+              v-on="on"
+              v-model="formatTime"
+              label
+              prepend-icon="fa-clock"
+              @click:prepend="dlgtime = true"
+              readonly
+              :error="!!error"
+              :data-cy="!!$ay.dev ? 'ttfpick:' + testId : false"
+            ></v-text-field>
+          </template>
+          <v-time-picker
+            scrollable
+            ampm-in-title
+            :format="hour12 ? 'ampm' : '24hr'"
+            v-model="timeOnly"
+            :data-cy="!!$ay.dev ? 'tpick:' + testId : false"
+          >
+            <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="fa-calendar-alt"
+      disabled
+    ></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: () => ({
+    date: null,
+    oldDate: null,
+    dlgdate: false,
+    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
+    },
+    testId: String
+  },
+  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>

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

@@ -1,128 +0,0 @@
-<template>
-  <!-- <div> -->
-  <v-row>
-    <v-col cols="6">
-      <v-text-field
-        ref="dateField"
-        :value="dateControlFormat()"
-        @input="handleDateInput"
-        :readonly="readonly"
-        :disabled="disabled"
-        :label="label"
-        :rules="rules"
-        type="date"
-        :error-messages="allErrors()"
-        :data-cy="!!$ay.dev ? 'dateinput:' + testId : false"
-      ></v-text-field>
-    </v-col>
-    <v-col cols="6">
-      <v-text-field
-        ref="timeField"
-        :value="timeControlFormat()"
-        @input="handleTimeInput"
-        :readonly="readonly"
-        :disabled="disabled"
-        type="time"
-        :data-cy="!!$ay.dev ? 'timeinput:' + testId : false"
-      ></v-text-field>
-    </v-col>
-  </v-row>
-  <!-- </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: {
-    value(val) {
-      this.internalValue = val;
-    }
-  },
-  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
-  },
-  methods: {
-    allErrors() {
-      //  console.log("allErrors:",this.errorMessages)
-      let ret = "";
-      if (this.error != null) {
-        ret = this.error;
-      }
-      if (this.errorMessages != null && this.errorMessages.length > 0) {
-        ret += this.errorMessages.toString();
-      }
-      return ret;
-    },
-    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
-      );
-      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 newValue = window.$gz.locale.localTimeDateStringToUTC8601String(
-        DatePortion + "T" + value,
-        this.timeZoneName
-      );
-      this.$emit("input", newValue);
-    }
-  }
-};
-</script>

ayanova/src/components/time-control.vue

@@ -1,155 +1,86 @@
 <template>
-  <div>
+  <v-text-field
-    <v-row v-if="!readonly">
+    ref="timeField"
-      <v-col cols="12">
+    :value="timeControlFormat()"
-        <v-dialog v-model="dlgtime" persistent width="290px">
+    @input="handleTimeInput"
-          <template v-slot:activator="{ on }">
+    :readonly="readonly"
-            <v-text-field
+    :disabled="disabled"
-              v-on="on"
+    :label="label"
-              v-model="formatTime"
+    :rules="rules"
-              v-bind:label="label"
+    :error-messages="allErrors()"
-              prepend-icon="fa-clock"
+    type="time"
-              @click:prepend="dlgtime = true"
+    :data-cy="!!$ay.dev ? 'timeinput:' + testId : false"
-              readonly
+  ></v-text-field>
-              :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="fa-calendar-alt"
-      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: () => ({
+  data() {
-    date: null,
+    return {
-    oldDate: null,
+      internalValue: null,
-    dlgtime: false,
+      timeZoneName: window.$gz.locale.getBrowserTimeZoneName()
-    //cache display format stuff
+    };
-    timeZoneName: window.$gz.locale.getBrowserTimeZoneName(),
+  },
-    languageName: window.$gz.locale.getBrowserLanguages(),
+  watch: {
-    hour12: window.$gz.locale.getHour12(),
+    value(val) {
-    defaultLocale: window.$gz.locale.getBrowserFirstLanguage().split("-", 1)[0]
+      this.internalValue = val;
-  }),
+    }
+  },
   props: {
     label: String,
     rules: Array,
-    value: String,
+    "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
-    }
-  },
-  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() {
+    testId: String
-      this.date = this.value; //always in UTC
-    }
   },
-  computed: {
+  methods: {
-    formatDateTime() {
+    allErrors() {
-      return window.$gz.locale.utcDateToShortDateAndTimeLocalized(
+      let ret = "";
-        this.value,
+      if (this.error != null) {
-        this.timeZoneName,
+        ret = this.error;
-        this.languageName,
+      }
-        this.hour12
+      if (this.errorMessages != null && this.errorMessages.length > 0) {
+        ret += this.errorMessages.toString();
+      }
+      return ret;
+    },
+    timeControlFormat() {
+      //hh:mm:ss in 24 hour format
+      return window.$gz.locale.utcDateStringToLocal8601TimeOnlyString(
+        this.internalValue,
+        this.timeZoneName
       );
     },
-    formatTime() {
+    handleTimeInput(value) {
-      return window.$gz.locale.utcDateToShortTimeLocalized(
+      let DatePortion = window.$gz.locale.utcDateStringToLocal8601DateOnlyString(
-        this.value,
+        this.internalValue,
-        this.timeZoneName,
+        this.timeZoneName
-        this.languageName,
-        this.hour12
       );
-    },
+      if (!DatePortion) {
-    dateOnly: {
+        let v = new Date();
-      get() {
+        let fullYear = v.getFullYear();
-        //return date only portion converted to local working time zone: YYYY-MM-DD
+        let fullMonth = v.getMonth() + 1;
-        return window.$gz.locale.utcDateStringToLocal8601DateOnlyString(
+        if (fullMonth < 10) {
-          this.value,
+          fullMonth = "0" + fullMonth.toString();
-          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(
+        let fullDay = v.getDate();
-          value + "T" + TimePortion,
+        if (fullDay < 10) {
-          this.timeZoneName
+          fullDay = "0" + fullDay.toString();
-        );
-      }
-    },
-    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;
         }
-
+        DatePortion = fullYear + "-" + fullMonth + "-" + fullDay;
-        this.date = window.$gz.locale.localTimeDateStringToUTC8601String(
-          DatePortion + "T" + value,
-          this.timeZoneName
-        );
       }
+      let newValue = window.$gz.locale.localTimeDateStringToUTC8601String(
+        DatePortion + "T" + value,
+        this.timeZoneName
+      );
+      this.$emit("input", newValue);
     }
   }
 };

ayanova/src/components/time-non-native-control.vue

@@ -0,0 +1,156 @@
+<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="fa-clock"
+              @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="fa-calendar-alt"
+      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>

ayanova/src/main.js

@@ -35,7 +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 dateTimeControl2 from "./components/date-time-non-native-control.vue";//keeping around in case need it for some reason
 import dateControl from "./components/date-control.vue";
 import timeControl from "./components/time-control.vue";
 import tagPicker from "./components/tag-picker.vue";
@@ -173,7 +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-time-non-native-picker", dateTimeNonNativeControl);//keeping in case decide to support alternative (at this time mostly for mac ios it seems)
 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-2-picker
+              <gz-date-time-picker
                 :label="$ay.t('WidgetStartDate')"
                 v-model="obj.startDate"
                 :readonly="formState.readOnly"
@@ -97,11 +97,11 @@
                 testId="startDate"
                 :error-messages="form().serverErrors(this, 'startDate')"
                 @input="fieldValueChanged('startDate')"
-              ></gz-date-time-2-picker>
+              ></gz-date-time-picker>
             </v-col>
 
             <v-col cols="12" sm="6" lg="4" xl="3">
-              <gz-date-time-2-picker
+              <gz-date-time-picker
                 :label="$ay.t('WidgetEndDate')"
                 :rules="[form().datePrecedence(this, 'startDate', 'endDate')]"
                 :error-messages="form().serverErrors(this, 'endDate')"
@@ -111,7 +111,7 @@
                 ref="endDate"
                 testId="endDate"
                 @input="fieldValueChanged('endDate')"
-              ></gz-date-time-2-picker>
+              ></gz-date-time-picker>
             </v-col>
             <v-col
               v-if="form().showMe(this, 'Active')"