From 4c7eeb8e7b18bc59631a46f185ec70f4de241064 Mon Sep 17 00:00:00 2001
From: John Cardinal <support@ayanova.com>
Date: Fri, 8 Mar 2019 18:57:00 +0000
Subject: [PATCH]

---
 ayanova/devdocs/todo.txt                      |  1 +
 .../src/components/gzdateandtimepicker.vue    | 26 +++++++++++++++++--
 ayanova/src/views/inventory-widget-edit.vue   |  2 ++
 3 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/ayanova/devdocs/todo.txt b/ayanova/devdocs/todo.txt
index 9de5618c..52a8a7d0 100644
--- a/ayanova/devdocs/todo.txt
+++ b/ayanova/devdocs/todo.txt
@@ -18,6 +18,7 @@ TODO NEXT
 DATETIME
 
 - Does it validate properly? NO.  Get validation working!!
+	- https://baianat.github.io/vee-validate/concepts/components.html#how-it-works
 	- possibly helpful https://stackoverflow.com/questions/47982820/vuejs-vee-validate-in-custom-components
 	- or https://duckduckgo.com/?q=vee+validate+with+custom+component&t=ffab&atb=v134-6__&ia=web
 	
diff --git a/ayanova/src/components/gzdateandtimepicker.vue b/ayanova/src/components/gzdateandtimepicker.vue
index 75364de0..ae1aed2c 100644
--- a/ayanova/src/components/gzdateandtimepicker.vue
+++ b/ayanova/src/components/gzdateandtimepicker.vue
@@ -11,6 +11,7 @@
               v-model="formatDate"
               v-bind:label="label"
               readonly
+              :error="!(!error)"
             ></v-text-field>
           </template>
           <v-date-picker v-model="dateOnly" @input="dlgdate = false">
@@ -22,7 +23,15 @@
       <v-flex xs6>
         <v-dialog v-model="dlgtime" persistent lazy full-width 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></v-text-field>
+            <v-text-field
+              v-on="on"
+              v-model="formatTime"
+              label
+              prepend-icon="fa-clock"
+              @click:prepend="dlgtime = true"
+              readonly
+              :error="!(!error)"
+            ></v-text-field>
           </template>
           <v-time-picker v-model="timeOnly">
             <v-spacer></v-spacer>
@@ -38,6 +47,7 @@
       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>
@@ -52,11 +62,23 @@ export default {
       throw "GzDateAndTimePicker: $gzlocale is required and missing";
     }
   },
+  $_veeValidate: {
+    name() {
+      return this.label;
+    },
+    value() {
+      return this.value;
+    }
+  },
   data: () => ({ date: null, dlgdate: false, dlgtime: false }),
   props: {
     label: String,
     value: String,
-    readonly: { type: Boolean, default: false }
+    readonly: { type: Boolean, default: false },
+    error: {
+      type: String,
+      required: false
+    }
   },
   watch: {
     date() {
diff --git a/ayanova/src/views/inventory-widget-edit.vue b/ayanova/src/views/inventory-widget-edit.vue
index 9b6677f6..311a4781 100644
--- a/ayanova/src/views/inventory-widget-edit.vue
+++ b/ayanova/src/views/inventory-widget-edit.vue
@@ -57,6 +57,7 @@
               :error-messages="errors.collect('startDate')"
               v-validate="'before:endDate'"
               ref="startDate"
+              :error="errors.first('startDate')"
             ></gz-date-time-picker>
           </v-flex>
 
@@ -68,6 +69,7 @@
               :error-messages="errors.collect('endDate')"
               v-validate="'after:startDate'"
               ref="endDate"
+              :error="errors.first('endDate')"
             ></gz-date-time-picker>
           </v-flex>