ayanova/src/components/date-time-native-control.vue

@@ -0,0 +1,126 @@
+<template>
+  <v-row>
+    <template v-if="!readonly">
+      <v-col cols="6">
+        <v-text-field
+          ref="dateField"
+          :value="splitValue.date"
+          @change="updateValue()"
+          :readonly="readonly"
+          :disabled="disabled"
+          :label="label"
+          :rules="rules"
+          type="date"
+          :error-messages="allErrors()"
+          :data-cy="'dateinput:' + testId"
+        ></v-text-field>
+      </v-col>
+      <v-col cols="6">
+        <v-text-field
+          ref="timeField"
+          :value="splitValue.time"
+          @change="updateValue()"
+          :readonly="readonly"
+          :disabled="disabled"
+          type="time"
+          :data-cy="'timeinput:' + testId"
+        ></v-text-field>
+      </v-col>
+    </template>
+    <template v-else>
+      <v-text-field
+        :value="readonlyFormat()"
+        :label="label"
+        readonly
+        disabled
+      ></v-text-field>
+    </template>
+  </v-row>
+</template>
+<script>
+//==========================================
+//==========================================
+export default {
+  data() {
+    return {
+      timeZoneName: window.$gz.locale.getBrowserTimeZoneName()
+    };
+  },
+
+  props: {
+    label: String,
+    rules: Array,
+    "error-messages": { type: Array, default: null },
+    value: { type: String, default: null },
+    readonly: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    error: {
+      type: String,
+      required: false
+    },
+    testId: String
+  },
+  computed: {
+    splitValue() {
+      return {
+        date: window.$gz.locale.utcDateStringToLocal8601DateOnlyString(
+          this.value,
+          this.timeZoneName
+        ),
+        time: window.$gz.locale.utcDateStringToLocal8601TimeOnlyString(
+          this.value,
+          this.timeZoneName
+        )
+      };
+    }
+  },
+  methods: {
+    allErrors() {
+      let ret = "";
+      if (this.error != null) {
+        ret = this.error;
+      }
+      if (this.errorMessages != null && this.errorMessages.length > 0) {
+        ret += this.errorMessages.toString();
+      }
+      return ret;
+    },
+    readonlyFormat() {
+      return window.$gz.locale.utcDateToShortDateAndTimeLocalized(
+        this.value,
+        this.timeZoneName,
+        this.languageName,
+        this.hour12
+      );
+    },
+    updateValue() {
+      let vm = this;
+      let dateValue = vm.$refs.dateField.$refs.input.value;
+      if (!dateValue) {
+        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();
+        }
+        dateValue = fullYear + "-" + fullMonth + "-" + fullDay;
+      }
+
+      let timeValue = vm.$refs.timeField.$refs.input.value;
+      if (!timeValue) {
+        timeValue = "00:00:00";
+      }
+
+      let ret = window.$gz.locale.localTimeDateStringToUTC8601String(
+        dateValue + "T" + timeValue,
+        vm.timeZoneName
+      );
+      vm.$emit("input", ret);
+    }
+  }
+};
+</script>