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

<template>
  <div>
    <v-row v-if="!readonly">
      <v-col cols="12">
        <v-dialog v-model="dlgtime" persistent width="290px">
          <template v-slot:activator="{ on }">
            <v-text-field
              v-on="on"
              v-model="formatTime"
              v-bind:label="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">{{
              $ay.t("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 */
//******************************** NOTE: this control also captures the date even though it's time only, this is an intentional design decision to support field change to date or date AND time and is considered a display issue */
export default {
  data: () => ({
    date: null,
    oldDate: null,
    dlgtime: false,
    //cache display format stuff
    timeZoneName: window.$gz.locale.getBrowserTimeZoneName(),
    languageName: window.$gz.locale.getBrowserLanguages(),
    hour12: window.$gz.locale.getHour12(),
    defaultLocale: window.$gz.locale.getBrowserFirstLanguage().split("-", 1)[0]
  }),
  props: {
    label: String,
    rules: Array,
    value: String,
    readonly: { type: Boolean, default: false },
    error: {
      type: String,
      required: false
    }
  },
  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
      let 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
      );
    },
    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) {
        //2017-08-15T12:10:34.4443084+03:00
        let TimePortion = this.timeOnly;
        if (!TimePortion) {
          TimePortion = "00:00:00";
        }
        this.date = window.$gz.locale.localTimeDateStringToUTC8601String(
          value + "T" + TimePortion,
          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) {
        let DatePortion = this.dateOnly;
        if (!DatePortion) {
          let v = new Date();
          let fullYear = v.getFullYear();
          let fullMonth = v.getMonth() + 1;
          if (fullMonth < 10) {
            fullMonth = "0" + fullMonth.toString();
          }
          let fullDay = v.getDate();
          if (fullDay < 10) {
            fullDay = "0" + fullDay.toString();
          }

          DatePortion = fullYear + "-" + fullMonth + "-" + fullDay;
        }

        this.date = window.$gz.locale.localTimeDateStringToUTC8601String(
          DatePortion + "T" + value,
          this.timeZoneName
        );
      }
    }
  }
};
</script>