raven-client/ayanova/src/components/date-time-control.vue

<template>
  <div>
    <v-row row wrap v-if="!readonly">
      <v-col xs6>
        <v-dialog
          ref="theDateDialog"
          v-model="dlgdate"
          persistent
          width="290px"
        >
          <template v-slot:activator="{ on }">
            <v-text-field
              v-on="on"
              prepend-icon="fa-calendar-alt"
              @click:prepend="dlgdate = true"
              v-model="formatDate"
              v-bind:label="label"
              v-bind:rules="rules"
              readonly
              :error="!!error"
            ></v-text-field>
          </template>
          <v-date-picker
            v-model="dateOnly"
            @input="dlgdate = false"
            :locale="defaultLocale"
          >
            <v-spacer></v-spacer>
            <v-btn text color="primary" @click="dlgdate = false">{{
              lt("OK")
            }}</v-btn>
          </v-date-picker>
        </v-dialog>
      </v-col>
      <v-col xs6>
        <v-dialog
          ref="theTimeDialog"
          v-model="dlgtime"
          persistent
          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
              :error="!!error"
            ></v-text-field>
          </template>
          <v-time-picker
            scrollable
            ampm-in-title
            :format="hour12 ? 'ampm' : '24hr'"
            v-model="timeOnly"
          >
            <v-spacer></v-spacer>
            <v-btn text color="primary" @click="dlgtime = false">{{
              lt("OK")
            }}</v-btn>
          </v-time-picker>
        </v-dialog>
      </v-col>
    </v-row>
    <v-text-field
      v-if="readonly"
      v-model="formatDateTime"
      v-bind:label="label"
      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>
/*  Xeslint-disable */
export default {
  data: () => ({
    date: null,
    oldDate: null,
    dlgdate: false,
    dlgtime: false,
    //cache display format stuff
    timeZoneName: window.$gz.locale.getTimeZoneName(),
    languageName: window.$gz.locale.getBrowserLanguages(),
    hour12: window.$gz.locale.getHour12(),
    defaultLocale: window.$gz.locale.getBrowserFirstLanguage().split("-", 1)[0]
    // ampmFormat: window.$gz.locale.getHour12() ? "ampm" : "24hr"
    //:format="ampmFormat"
  }),
  props: {
    label: String,
    rules: Array,
    value: String,
    readonly: { type: Boolean, default: false },
    error: {
      type: String,
      required: false
    }
  },
  methods: {
    lt(ltKey) {
      return window.$gz.locale.get(ltKey);
    }
  },
  watch: {
    date() {
      //this tortuous fuckery is required so that the input and change events only fire on a real change, not initial page load
      //also it shouldn't signal a change if the values are the same and nothing was effectively changed
      var hasChanged = false;
      if (this.date != this.oldDate) {
        hasChanged = true;
      }
      this.oldDate = this.date;
      if (hasChanged) {
        this.$emit("input", this.date); //always in UTC
        this.$emit("change", this.date); //always in UTC
      }
    },
    value() {
      this.date = this.value; //always in UTC
    }
  },
  computed: {
    formatDateTime() {
      return window.$gz.locale.utcDateToShortDateAndTimeLocalized(
        this.value,
        this.timeZoneName,
        this.languageName,
        this.hour12
      );
    },
    formatDate() {
      return window.$gz.locale.utcDateToShortDateLocalized(
        this.value,
        this.timeZoneName,
        this.languageName
      );
    },
    formatTime() {
      return window.$gz.locale.utcDateToShortTimeLocalized(
        this.value,
        this.timeZoneName,
        this.languageName,
        this.hour12
      );
    },
    dateOnly: {
      get() {
        //return date only portion converted to local working time zone: YYYY-MM-DD
        return window.$gz.locale.utcDateStringToLocal8601DateOnlyString(
          this.value,
          this.timeZoneName
        );
      },
      set(value) {
        this.date = window.$gz.locale.localTimeDateStringToUTC8601String(
          value + "T" + this.timeOnly,
          this.timeZoneName
        );
      }
    },
    timeOnly: {
      //expects just the hours minutes seconds portion: 18:18:49
      //Needs to convert into and out of the desired time zone or the control will show the UTC time instead
      get() {
        return window.$gz.locale.utcDateStringToLocal8601TimeOnlyString(
          this.value,
          this.timeZoneName
        );
      },
      set(value) {
        this.date = window.$gz.locale.localTimeDateStringToUTC8601String(
          this.dateOnly + "T" + value,
          this.timeZoneName
        );
      }
    }
  }
};
</script>