127 lines
3.1 KiB
Vue
127 lines
3.1 KiB
Vue
<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="!!$ay.dev ? 'dateinput:' + testId : false"
|
|
></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="!!$ay.dev ? 'timeinput:' + testId : false"
|
|
></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>
|