ayanova/devdocs/todo.txt

@@ -14,7 +14,15 @@ TODO CLIENT STUFF
 
     TODO NEXT
 
-DATETIME - working on styling it to look like the other input controls check the options in the picker component for styling
+DATETIME - Ok, fuck a combined date and time, no one else seems to support it but me so split it into separate components:
+	- Get the test form working with a custom date and time thing like this:
+		- single read only text field with initial display of date and time in users's locale format
+		- A button to the left with a calendar icon to trigger a date picker to adjust the date
+		- A button to the right with a clock icon to trigger a time picker to set the time
+		- Once this is working how I like then make it a VUE component that is self contained
+			- Date and time formatting and display need to be abstracted in case we change date libs from dayjs to something else
+		- Must validate and report validation errors just like the built in fields do
+
 
 DON'T code the user options with the currency symbol etc until after it's all been worked out client side.  Use static values instad in locale.
 Locale should fetch those settings the first time it sees they are not present so that they are refreshed upon use and are not stored in localstorage

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

@@ -61,11 +61,11 @@
             >
               <v-text-field
                 slot="activator"
-                v-model="date"
+                :value="obj.startDate"
-                :label="lc.get('WidgetStartDate')"           
+                :label="lc.get('WidgetStartDate')"
                 readonly
               ></v-text-field>
-              <v-date-picker v-model="date" @input="menu2 = false"></v-date-picker>
+              <v-date-picker v-model="obj.startDate" @input="menu2 = false"></v-date-picker>
             </v-menu>
           </v-flex>
           <!--           
@@ -118,17 +118,45 @@
 //import store from "../store";
 import locale from "../api/locale";
 import api from "../api/apiutil";
+import dayjs from "dayjs";
 //import _ from "../utils/libs/lodash.js";
 export default {
   components: {},
   data() {
     return {
-      obj: {},
+      obj: {
+        // id: 1,
+        // concurrencyToken: 1,
+        // ownerId: 1,
+        // name: "...",
+        // serial: 1,
+        // dollarAmount: 1.1,
+        // active: true,
+        // roles: 1,
+        // startDate: "2000-01-12T10:12:39.594206",
+        // endDate: "2000-01-12T13:40:59.986405",
+        // notes: "...",
+        // count: 1,
+        // customFields: null,
+        // tags: []
+      },
       lc: locale,
       menu2: false,
       date: new Date().toISOString().substr(0, 10)
     };
   },
+  computed: {
+    computedDateFormattedMomentjs() {
+
+      
+      var value=this.obj.startDate;
+       if (!value) return "";
+  var dj = dayjs(value);
+  return dj.format("YYYY-MM-DD hh:mm:ss A");
+
+      return this.date ? moment(this.date).format("dddd, MMMM Do YYYY") : "";
+    }
+  },
   beforeRouteEnter(to, from, next) {
     //Cache all required lt keys
     var ltKeysRequired = [
@@ -164,7 +192,7 @@ export default {
   },
   mounted() {
     //debugger;
-    this.getDataFromApi();
+    // this.getDataFromApi();
   },
   methods: {
     getDataFromApi() {
@@ -196,6 +224,9 @@ export default {
 
       console.log(this.lc.decimalParse(this.obj.dollarAmount));
     }
+  },
+  created() {
+    this.getDataFromApi();
   }
 };
 </script>