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

ayanova/devdocs/rando-todo.txt

@@ -84,7 +84,10 @@ todo: REPORTING bits and pieces
 		https://stackoverflow.com/questions/56959242/how-do-i-get-readable-browser-page-errors-out-of-puppeteer-sharp
 
 
-
+todo: datetime controls, would be nice to add a More menu | that can be used to 
+	pick date ranges like if it's a start date it can quickly be used to pick the first day last month or 
+	last day of a pre-set range from our already defined date range choices for grid filters
+	some of the 3rd party date pickers were like that
 
 todo: ON HOLD TIL LATER Lagging typing in name field on customize form for data grid filter 
 	Giving up on this for now, but noticed the following:

ayanova/devdocs/todo.txt

@@ -6,32 +6,18 @@
 MISC ITEMS THAT CAME UP
 
 todo: DATE / TIME / DATE_TIME controls switch back to vuetify ones
-	Look into code, the non native originals are outdated in the methods they use (watchers)
+	Xdatetime
-		make copies of them for backup then morph them into the same type of code as the native ones use
+	DateOnly
-		as that is the most current performant reliable way to do it.
+	TimeOnly
-
+	Smoke test rewrite
-	Ensure can clear completely to null value
-	Test it out thoroughly there was a reason I quit using it the first time
-		i18n
-		smoke test (maybe some way to bypass the control for test purposes)
-	Is it possible to still keep the native ones in there somehow with a v-if template and a setting?
-		maybe get the nonnative one working then look into supporting this for edge cases or future proofing
-
-
-	Lots of warnings about using native ones on the MDN site, looks like I should use a component of some kind
-	so if I do I might as well use the vuetify ones since there are no substantially greater options out there
-
-	It would be very nice though if I could opt to have the user be able to choose alternatives like a native input for when 
-	browser makers actually get around to implementing them properly, some have and some are good but some like apple just don't work
-
-	bugbug datetime control clear buttons don't trigger emit of empty date times
-	contractexpires on customer form clearing it and saving sends date to server as if it wasn't cleared at all
-	Better solution: one clear button that clears all and emits properly and disable the built in if possible
-
 
 todo: datetime testing make sure locale, am/pm etc are all honoured
 	test READ ONLY as well
 
+todo: 24hr setting, where does it come from, is it detected?  there is no forceful settingh for it anymore in user settings?!
+
+
+
 todo: gz-data-table make sure unbounded notes column is bounded by some length restriction
 	mobile format is ok, it cuts off at one line, but for desktop we should have a sane limit as right now it's completely unbounded
 	this should apply to any column that displays text but particularly just the plain text ones

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

@@ -1,13 +1,8 @@
 <template>
-  <div>
+  <v-row>
-    <v-row v-if="!readonly">
+    <template v-if="!readonly">
       <v-col xs6>
-        <v-dialog
+        <v-dialog ref="theDateDialog" v-model="dlgdate" width="290px">
-          ref="theDateDialog"
-          v-model="dlgdate"
-          persistent
-          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
+        <v-dialog ref="theTimeDialog" v-model="dlgtime" width="290px">
-          ref="theTimeDialog"
-          v-model="dlgtime"
-          persistent
-          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>
+    </template>
-    <v-text-field
+    <template v-else>
-      v-if="readonly"
+      <v-text-field
-      v-model="formatDateTime"
+        :value="readonlyFormat()"
-      v-bind:label="label"
+        :label="label"
-      prepend-icon="$ayiCalendarAlt"
+        readonly
-      disabled
+        disabled
-    ></v-text-field>
+        prepend-icon="$ayiCalendarAlt"
-    <p v-show="error" class="form__error v-messages theme--light error--text">
+      ></v-text-field>
-      {{ error }}
+      <p v-show="error" class="form__error v-messages theme--light error--text">
-    </p>
+        {{ error }}
-  </div>
+      </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";
       }

ayanova/src/views/cust-customer.vue

@@ -2,7 +2,7 @@
   <v-container fluid>
     <gz-report-selector ref="reportSelector"></gz-report-selector>
     <!-- {{ formState }} -->
-    {{ obj.contractExpires }}
+    <!-- {{ obj.contractExpires }} -->
     <div v-if="formState.ready">
       <gz-error :errorBoxMessage="formState.errorBoxMessage"></gz-error>