diff --git a/ayanova/src/components/date-control.vue b/ayanova/src/components/date-control.vue
index 9145996f..b47ef971 100644
--- a/ayanova/src/components/date-control.vue
+++ b/ayanova/src/components/date-control.vue
@@ -1,21 +1,30 @@
 <template>
-  <div>
-    <v-row v-if="!readonly">
+  <v-row>
+    <template v-if="!readonly">
       <v-col cols="12">
-        <v-dialog v-model="dlgdate" persistent width="290px">
+        <v-dialog v-model="dlgdate" width="290px">
           <template v-slot:activator="{ on }">
             <v-text-field
               v-on="on"
               prepend-icon="$ayiCalendarAlt"
               @click:prepend="dlgdate = true"
-              v-model="formatDate"
+              :value="dateValue"
               v-bind:label="label"
               v-bind:rules="rules"
               readonly
               :error="!!error"
+              :data-cy="'dtfpick:' + testId"
             ></v-text-field>
           </template>
-          <v-date-picker :locale="defaultLocale" v-model="dateOnly">
+          <v-date-picker
+            :value="dateValue"
+            @input="updateDateValue"
+            :locale="defaultLocale"
+            :data-cy="'dpick:' + testId"
+          >
+            <v-btn text color="primary" @click="$emit('input', null)">{{
+              $ay.t("Delete")
+            }}</v-btn>
             <v-spacer></v-spacer>
             <v-btn text color="primary" @click="dlgdate = false">{{
               $ay.t("OK")
@@ -23,26 +32,26 @@
           </v-date-picker>
         </v-dialog>
       </v-col>
-    </v-row>
-    <v-text-field
-      v-if="readonly"
-      v-model="formatDateTime"
-      v-bind:label="label"
-      prepend-icon="$ayiCalendarAlt"
-      disabled
-    ></v-text-field>
-    <p v-show="error" class="form__error v-messages theme--light error--text">
-      {{ error }}
-    </p>
-  </div>
+    </template>
+    <template v-else>
+      <v-text-field
+        :value="readonlyFormat()"
+        :label="label"
+        readonly
+        disabled
+        prepend-icon="$ayiCalendarAlt"
+      ></v-text-field>
+      <p v-show="error" class="form__error v-messages theme--light error--text">
+        {{ error }}
+      </p>
+    </template>
+  </v-row>
 </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(),
@@ -52,32 +61,42 @@ export default {
   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
-      }
     },
-    value() {
-      this.date = this.value; //always in UTC
-    }
+    testId: String
   },
   computed: {
-    formatDateTime() {
+    timeValue() {
+      return window.$gz.locale.utcDateStringToLocal8601TimeOnlyString(
+        this.value,
+        this.timeZoneName
+      );
+    },
+    dateValue() {
+      return window.$gz.locale.utcDateStringToLocal8601DateOnlyString(
+        this.value,
+        this.timeZoneName
+      );
+    }
+  },
+  methods: {
+    allErrors() {
+      let ret = "";
+      if (this.error != null) {
+        ret = this.error;
+      }
+      if (this.errorMessages != null && this.errorMessages.length > 0) {
+        ret += this.errorMessages.toString();
+      }
+      return ret;
+    },
+    readonlyFormat() {
       return window.$gz.locale.utcDateToShortDateAndTimeLocalized(
         this.value,
         this.timeZoneName,
@@ -85,72 +104,36 @@ export default {
         this.hour12
       );
     },
-    formatDate() {
-      return window.$gz.locale.utcDateToShortDateLocalized(
-        this.value,
-        this.timeZoneName,
-        this.languageName
-      );
+    updateDateValue(v) {
+      this.updateValue(v, this.timeValue);
+      this.dlgdate = false;
     },
-    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();
-          }
+    updateValue(theDate, theTime) {
+      let vm = this;
 
-          DatePortion = fullYear + "-" + fullMonth + "-" + fullDay;
+      if (!theDate) {
+        let v = new Date();
+        let fullYear = v.getFullYear();
+        let fullMonth = v.getMonth() + 1;
+        if (fullMonth < 10) {
+          fullMonth = "0" + fullMonth.toString();
         }
-
-        this.date = window.$gz.locale.localTimeDateStringToUTC8601String(
-          DatePortion + "T" + value,
-          this.timeZoneName
-        );
+        let fullDay = v.getDate();
+        if (fullDay < 10) {
+          fullDay = "0" + fullDay.toString();
+        }
+        theDate = fullYear + "-" + fullMonth + "-" + fullDay;
       }
+
+      if (!theTime) {
+        theTime = "00:00:00";
+      }
+
+      let ret = window.$gz.locale.localTimeDateStringToUTC8601String(
+        theDate + "T" + theTime,
+        vm.timeZoneName
+      );
+      vm.$emit("input", ret);
     }
   }
 };
diff --git a/ayanova/src/components/date-time-control.vue b/ayanova/src/components/date-time-control.vue
index baa82141..ef460509 100644
--- a/ayanova/src/components/date-time-control.vue
+++ b/ayanova/src/components/date-time-control.vue
@@ -2,7 +2,7 @@
   <v-row>
     <template v-if="!readonly">
       <v-col xs6>
-        <v-dialog ref="theDateDialog" v-model="dlgdate" width="290px">
+        <v-dialog v-model="dlgdate" width="290px">
           <template v-slot:activator="{ on }">
             <v-text-field
               v-on="on"
@@ -18,7 +18,6 @@
           </template>
           <v-date-picker
             :value="dateValue"
-            ref="dateField"
             @input="updateDateValue"
             :locale="defaultLocale"
             :data-cy="'dpick:' + testId"
@@ -34,7 +33,7 @@
         </v-dialog>
       </v-col>
       <v-col xs6>
-        <v-dialog ref="theTimeDialog" v-model="dlgtime" width="290px">
+        <v-dialog v-model="dlgtime" width="290px">
           <template v-slot:activator="{ on }">
             <v-text-field
               v-on="on"
@@ -53,7 +52,6 @@
             :format="hour12 ? 'ampm' : '24hr'"
             :value="timeValue"
             @input="updateTimeValue"
-            ref="timeField"
             :data-cy="'tpick:' + testId"
           >
             <v-btn text color="primary" @click="$emit('input', null)">{{
@@ -106,7 +104,6 @@ export default {
     },
     testId: String
   },
-
   computed: {
     timeValue() {
       return window.$gz.locale.utcDateStringToLocal8601TimeOnlyString(