switch back to vuetify datetime picker completed now to do date and time standalone

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

@@ -1,13 +1,8 @@
 <template>
-  <div>
-    <v-row v-if="!readonly">
+  <v-row>
+    <template v-if="!readonly">
       <v-col xs6>
-        <v-dialog
-          ref="theDateDialog"
-          v-model="dlgdate"
-          persistent
-          width="290px"
-        >
+        <v-dialog ref="theDateDialog" v-model="dlgdate" width="290px">
           <template v-slot:activator="{ on }">
             <v-text-field
               v-on="on"
@@ -28,6 +23,9 @@
             :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")
@@ -36,12 +34,7 @@
         </v-dialog>
       </v-col>
       <v-col xs6>
-        <v-dialog
-          ref="theTimeDialog"
-          v-model="dlgtime"
-          persistent
-          width="290px"
-        >
+        <v-dialog ref="theTimeDialog" v-model="dlgtime" width="290px">
           <template v-slot:activator="{ on }">
             <v-text-field
               v-on="on"
@@ -63,6 +56,9 @@
             ref="timeField"
             :data-cy="'tpick:' + 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="dlgtime = false">{{
               $ay.t("OK")
@@ -70,18 +66,20 @@
           </v-time-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 */
@@ -143,22 +141,14 @@ export default {
       );
     },
     updateTimeValue(v) {
-      // console.log("updatedTimevalue", v);
-      // console.log("currentDateValue", this.dateValue);
       this.updateValue(this.dateValue, v);
     },
     updateDateValue(v) {
-      // console.log("updatedDatevalue", v);
-      // console.log("currentTimeValue", this.timeValue);
       this.updateValue(v, this.timeValue);
       this.dlgdate = false;
     },
     updateValue(theDate, theTime) {
-      // console.log("updatevalue", v);
-      //@input="dlgdate = false"
       let vm = this;
-      //console.log(vm.$refs.dateField.value);
-      // let dateValue = vm.$refs.dateField.$refs.input.value;
 
       if (!theDate) {
         let v = new Date();
@@ -174,7 +164,6 @@ export default {
         theDate = fullYear + "-" + fullMonth + "-" + fullDay;
       }
 
-      // let timeValue = vm.$refs.timeField.$refs.input.value;
       if (!theTime) {
         theTime = "00:00:00";
       }