<template>
  <div>
    <v-layout row wrap v-if="!readonly">
      <v-flex xs6>
        <v-dialog v-model="modal" persistent lazy full-width width="290px">
          <template v-slot:activator="{ on }">
            <v-text-field
              v-on="on"
              prepend-icon="fa-calendar-alt"
              v-model="formatDate"
              v-bind:label="label"
              readonly
            ></v-text-field>
          </template>
          <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">
          <template v-slot:activator="{ on }">
            <v-text-field v-on="on" v-model="formatTime" label prepend-icon="fa-clock" readonly></v-text-field>
          </template>
          <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-if="readonly"
      v-model="formatDateTime"
      v-bind:label="label"
      prepend-icon="fa-calendar-alt"
      disabled
    ></v-text-field>
  </div>
</template> 
<script>
/*  eslint-disable */
export default {
  beforeCreate() {
    console.log("Nothing gets called before me!");
  },
  data: () => ({ date: null, modal: false, modal2: false }),
  props: {
    label: String,
    value: String,
    readonly: { type: Boolean, default: false },
    //dayjs: Function,
    locale: Object
  },
  watch: {
    date() {
      this.$emit("input", this.date); //always in UTC
    },
    value() {
      this.date = this.value; //always in UTC
    }
  },
  computed: {
    formatDateTime() {
      return this.value
        ? this.$dayjs(this.value)
            .add(this.locale.timeZoneOffset, "hour")
            .format(this.locale.formats.shortDateAndTime)
        : "";
    },
    formatDate() {
      return this.value
        ? this.$dayjs(this.value)
            .add(this.locale.timeZoneOffset, "hour")
            .format(this.locale.formats.shortDate)
        : "";
    },
    formatTime() {
      return this.value
        ? this.$dayjs(this.value)
            .add(this.locale.timeZoneOffset, "hour")
            .format(this.locale.formats.shortTime)
        : "";
    },
    dateOnly: {
      get() {
        return this.$dayjs(this.value)
          .add(this.locale.timeZoneOffset, "hour")
          .format("YYYY-MM-DD");
      },
      set(value) {
        this.date = this.$dayjs(value + " " + this.timeOnly)
          .subtract(this.locale.timeZoneOffset, "hour")
          .toISOString();
      }
    },
    timeOnly: {
      get() {
        return this.$dayjs(this.value)
          .add(this.locale.timeZoneOffset, "hour")
          .format("HH:mm:ss");
      },
      set(value) {
        this.date = this.$dayjs(this.dateOnly + " " + value)
          .subtract(this.locale.timeZoneOffset, "hour")
          .toISOString();
      }
    }
  }
};
</script>

<!--

NOTE: this component was created based on a reddit query and answer below.
Note also that the date and time coming in to this component are expected to be an ISO8601 format date and time string in UTC
and it's kept in UTC and only localized temporarily for display and selection and update after selection in the date and time picker components

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>-->