ayanova/src/components/gzdateandtimepicker.vue

@@ -0,0 +1,61 @@
+<template>
+  <div>
+    <v-menu
+      ref="menu"
+      v-model="menu2"
+      :close-on-content-click="false"
+      :nudge-right="40"
+      :return-value.sync="time"
+      lazy
+      transition="scale-transition"
+      offset-y
+      full-width
+      max-width="290px"
+      min-width="290px"
+    >
+      <template v-slot:activator="{ on }">
+        <v-text-field
+          v-model="time"
+          label="Picker in menu"
+          prepend-icon="fa-calendar-alt"
+          @click:prepend="sproing('CLICK DATE')"
+          append-icon="fa-clock"
+          @click:append="sproing('CLICK TIME')"
+          readonly
+          v-on="on"
+        ></v-text-field>
+      </template>
+      <v-time-picker
+        v-if="menu2"
+        v-bind:value="value"
+        v-on:input="$emit('input', $event.target.value)"
+      ></v-time-picker>
+    </v-menu>
+  </div>
+</template>
+
+
+<script>
+//https://stackoverflow.com/questions/54575541/vuetify-timepicker-return-value-to-model
+export default {
+  props: {
+    value: String,
+    formatDate: Function
+  },
+  data() {
+    return {
+      time: null,
+      menu2: false,
+      modal2: false
+    };
+  },
+  mounted() {},
+  methods: {
+    sproing: function(msg) {
+      alert(msg);
+    }
+  }
+};
+</script>
+<style>
+</style>

ayanova/src/main.js

@@ -13,6 +13,7 @@ import "nprogress/nprogress.css";
 import dayjs from "dayjs";
 import gzdatepicker from "./components/gzdatepicker.vue";
 import gztimepicker from "./components/gztimepicker.vue";
+import gzdateandtimepicker from "./components/gzdateandtimepicker.vue";
 
 /////////////////////////////////////////////////////////////////
 // FORM VALIDATION
@@ -108,6 +109,7 @@ Vue.filter("boolastext", function(value) {
 //
 Vue.component("gz-date-picker", gzdatepicker);
 Vue.component("gz-time-picker", gztimepicker);
+Vue.component("gz-date-time-picker", gzdateandtimepicker);
 
 /////////////////////////////////////////////////////////////////
 // INSTANTIATE

ayanova/src/views/inventory-widget-edit.vue

@@ -70,6 +70,11 @@
               required
             ></v-checkbox>
           </v-flex>
+
+          <v-flex xs12 sm6 lg4 xl3 px-2>
+            <div>{{obj.startDate}}</div>
+            <gz-date-time-picker label="TESTBOTHPICKERS" v-model="obj.startDate"></gz-date-time-picker>
+          </v-flex>
         </v-layout>
         <v-layout align-center justify-space-around row wrap mt-5>
           <v-flex xs1>
@@ -99,8 +104,7 @@ export default {
   components: {},
   data() {
     return {
-      obj: {
-      },
+      obj: {},
       lc: locale
     };
   },
@@ -110,11 +114,9 @@ export default {
     //   // if (!value) return "";
     //   // var dj = dayjs(value);
     //   // return dj.format("YYYY-MM-DD hh:mm:ss A");
-
     //   return this.obj.startDate
     //     ? dayjs(this.obj.startDate).format("YYYY-MM-DD hh:mm:ss A")
     //     : "";
-
     //   //return this.obj.startDate ? moment(this.date).format("dddd, MMMM Do YYYY") : "";
     // }
   },