ayanova/src/components/gzdateandtimepicker.vue

@@ -46,7 +46,7 @@ export default {
   props: {
     label: String,
     value: String,
-    readonly: Boolean,
+    readonly: { type: Boolean, default: false },
     dayjs: Function,
     locale: Object
   },
@@ -60,20 +60,23 @@ export default {
   },
   computed: {
     formatDateTime() {
-     //console.log("FORMAT DATE TIME");
-     //debugger;
+      //console.log("FORMAT DATE TIME");
+      //debugger;
       return this.value
-        ? this.dayjs(this.value).format(this.locale.formats.shortDateAndTime)
+        ? this.dayjs(this.value).add(this.locale.timeZoneOffset, "hour").format(this.locale.formats.shortDateAndTime)
         : "";
     },
     formatDate() {
       return this.value
-        ? this.dayjs(this.value).format(this.locale.formats.shortDate)
+        ? this.dayjs(this.value).add(this.locale.timeZoneOffset, "hour").format(this.locale.formats.shortDate)
         : "";
     },
     formatTime() {
+      //debugger;
       return this.value
-        ? this.dayjs(this.value).format(this.locale.formats.shortTime)
+        ? this.dayjs(this.value)
+            .add(this.locale.timeZoneOffset, "hour")
+            .format(this.locale.formats.shortTime)
         : "";
       //Note in original code this would be parsed expecting source value to be in UTC format coming in but display in local time format
       //so
@@ -107,3 +110,128 @@ export default {
   }
 };
 </script>
+
+<!--
+re: combined date/time component
+
+from theRetrograde sent 4 hours ago
+
+We are using this in a dynamic form that will display a textbox, when the user clicks the textbox a modal opens to show the pickers. 
+I'm not sure why it wouldn't be rendering initially.
+Here are the props we pass to the component, maybe this will help:
+
+<template v-else-if="get_field_type(key) == 'datetime'">
+                    <AppDateTimePicker 
+                      v-model="editedItem[key]"
+                      v-bind:key="key"
+                      v-bind:readonly="is_readonly(key)"
+                      v-bind:label="pretty_field(key)">
+                    </AppDateTimePicker>
+             </template>
+
+
+<template>
+  <div>
+    <v-layout row wrap v-if="!readonly">
+      <v-flex xs6>
+        <v-dialog v-model="modal" persistent lazy full-width width="290px">
+          <v-text-field
+            slot="activator"
+            v-model="formatDate"
+            v-bind:label="label"
+            prepend-icon="event"
+            readonly
+          ></v-text-field>
+          <v-date-picker v-model="dateOnly" @input="modal = false">
+            <v-spacer></v-spacer>
+            <v-btn flat color="primary" @click="modal = false">Close</v-btn>
+          </v-date-picker>
+        </v-dialog>
+      </v-flex>
+      <v-flex xs6>
+        <v-dialog v-model="modal2" persistent lazy full-width width="290px">
+          <v-text-field
+            slot="activator"
+            v-model="formatTime"
+            label
+            prepend-icon="access_time"
+            readonly
+          ></v-text-field>
+          <v-time-picker v-model="timeOnly">
+            <v-spacer></v-spacer>
+            <v-btn flat color="primary" @click="modal2 = false">OK</v-btn>
+          </v-time-picker>
+        </v-dialog>
+      </v-flex>
+    </v-layout>
+    <v-text-field
+      v-else
+      v-model="formatDateTime"
+      v-bind:label="label"
+      prepend-icon="event"
+      disabled
+    ></v-text-field>
+  </div>
+</template> 
+
+// <script>
+// export default {
+//   data: () => ({ date: null, modal: false, modal2: false }),
+//   props: { label: String, value: String, readonly: Boolean },
+//   watch: {
+//     date() {
+//       this.$emit("input", this.date);
+//     },
+//     value() {
+//       this.date = this.value;
+//     }
+//   },
+//   computed: {
+//     formatDateTime() {
+//       let momentObj = this.$moment.utc();
+//       if (this.value) {
+//         momentObj = this.$moment.utc(this.value);
+//       }
+//       return momentObj.local().format("dddd MM/DD/YYYY h:mm a");
+//     },
+//     formatDate() {
+//       let momentObj = this.$moment.utc();
+//       if (this.value) {
+//         momentObj = this.$moment.utc(this.value);
+//       }
+//       return momentObj.local().format("dddd MM/DD/YYYY");
+//     },
+//     dateOnly: {
+//       get() {
+//         let momentObj = this.$moment.utc();
+//         if (this.value) {
+//           momentObj = this.$moment.utc(this.value);
+//         }
+//         return momentObj.local().format("YYYY-MM-DD");
+//       },
+//       set(value) {
+//         this.date = value + " " + this.timeOnly;
+//       }
+//     },
+//     timeOnly: {
+//       get() {
+//         let momentObj = this.$moment.utc();
+//         if (this.value) {
+//           momentObj = this.$moment.utc(this.value);
+//         }
+//         return momentObj.local().format("HH:mm:ss");
+//       },
+//       set(value) {
+//         this.date = this.dateOnly + " " + value;
+//       }
+//     },
+//     formatTime() {
+//       let momentObj = this.$moment.utc();
+//       if (this.value) {
+//         momentObj = this.$moment.utc(this.value);
+//       }
+//       return momentObj.local().format("h:mm a");
+//     }
+//   }
+// };
+// </script>-->