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

<template>
  <div>
    <v-row row wrap v-if="!readonly">
      <v-col cols="12">
        <v-dialog 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 :locale="defaultLocale" v-model="dateOnly">
            <v-spacer></v-spacer>
            <v-btn text color="primary" @click="dlgdate = false">{{
              lt("OK")
            }}</v-btn>
          </v-date-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 TIME even though it's DATE 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 {
  beforeCreate() {
    //debugger;@input="dlgdate = false"
    //this is a nothing line as a test
    //check pre-requisites exist just in case
    if (window.$gz.errorHandler.devMode()) {
      if (!window.$gz.dayjs) {
        throw "DateTimeControl: the DayJS library is required and missing";
      }
      if (!window.$gz.locale) {
        throw "DateTimeControl: $gz.locale is required and missing";
      }
    }
  },
  data: () => ({
    date: null,
    oldDate: null,
    dlgdate: false,
    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
    }
  },
  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 this.value
        ? window.$gz.dayjs
            .utc(this.value)
            .add(window.$gz.locale.format().timeZoneOffset, "hour")
            .format(window.$gz.locale.format().shortDateAndTime)
        : "";
    },
    formatDate() {
      return this.value
        ? window.$gz.dayjs
            .utc(this.value)
            .add(window.$gz.locale.format().timeZoneOffset, "hour")
            .format(window.$gz.locale.format().shortDate)
        : "";
    },
    formatTime() {
      return this.value
        ? window.$gz.dayjs
            .utc(this.value)
            .add(window.$gz.locale.format().timeZoneOffset, "hour")
            .format(window.$gz.locale.format().shortTime)
        : "";
    },
    dateOnly: {
      get() {
        //TODO: this will likely need an improvement for forms where there should be an automatic pre-set time chosen like workorder labor;
        var defaultDateString = window.$gz
          .dayjs()
          .utc()
          .add(window.$gz.locale.format().timeZoneOffset, "hour")
          .format("YYYY-MM-DD");

        return this.value
          ? window.$gz.dayjs
              .utc(this.value)
              .add(window.$gz.locale.format().timeZoneOffset, "hour")
              .format("YYYY-MM-DD")
          : defaultDateString;
      },
      set(value) {
        this.date = window.$gz.dayjs
          .utc(value + " " + this.timeOnly)
          .subtract(window.$gz.locale.format().timeZoneOffset, "hour")
          .toISOString();
      }
    },
    timeOnly: {
      get() {
        //TODO: this will likely need an improvement for forms where there should be an automatic pre-set time chosen like workorder labor;
        var defaultTimeString = window.$gz.dayjs
          .utc()
          .add(window.$gz.locale.format().timeZoneOffset, "hour")
          .format("HH:mm:ss");

        return this.value
          ? window.$gz.dayjs
              .utc(this.value)
              .add(window.$gz.locale.format().timeZoneOffset, "hour")
              .format("HH:mm:ss")
          : defaultTimeString;
      },
      set(value) {
        this.date = window.$gz.dayjs
          .utc(this.dateOnly + " " + value)
          .subtract(window.$gz.locale.format().timeZoneOffset, "hour")
          .toISOString();
      }
    }
  }
};
</script>