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() {