This commit is contained in:
@@ -1,107 +1,156 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<template v-if="!readonly">
|
<v-row v-if="!readonly">
|
||||||
<v-text-field
|
<v-col cols="12">
|
||||||
ref="dateField"
|
<v-dialog v-model="dlgdate" persistent width="290px">
|
||||||
:value="dateValue"
|
<template v-slot:activator="{ on }">
|
||||||
@change="updateValue()"
|
<v-text-field
|
||||||
:readonly="readonly"
|
v-on="on"
|
||||||
:disabled="disabled"
|
prepend-icon="$ayiCalendarAlt"
|
||||||
:label="label"
|
@click:prepend="dlgdate = true"
|
||||||
:rules="rules"
|
v-model="formatDate"
|
||||||
type="date"
|
v-bind:label="label"
|
||||||
:error-messages="allErrors()"
|
v-bind:rules="rules"
|
||||||
:data-cy="'dateinput:' + testId"
|
readonly
|
||||||
></v-text-field>
|
:error="!!error"
|
||||||
</template>
|
></v-text-field>
|
||||||
<template v-else>
|
</template>
|
||||||
<v-text-field
|
<v-date-picker :locale="defaultLocale" v-model="dateOnly">
|
||||||
:value="readonlyFormat()"
|
<v-spacer></v-spacer>
|
||||||
:label="label"
|
<v-btn text color="primary" @click="dlgdate = false">{{
|
||||||
readonly
|
$ay.t("OK")
|
||||||
disabled
|
}}</v-btn>
|
||||||
></v-text-field>
|
</v-date-picker>
|
||||||
</template>
|
</v-dialog>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
<v-text-field
|
||||||
|
v-if="readonly"
|
||||||
|
v-model="formatDateTime"
|
||||||
|
v-bind:label="label"
|
||||||
|
prepend-icon="$ayiCalendarAlt"
|
||||||
|
disabled
|
||||||
|
></v-text-field>
|
||||||
|
<p v-show="error" class="form__error v-messages theme--light error--text">
|
||||||
|
{{ error }}
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
/* Xeslint-disable */
|
/* 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 {
|
export default {
|
||||||
data() {
|
data: () => ({
|
||||||
return {
|
date: null,
|
||||||
timeZoneName: window.$gz.locale.getBrowserTimeZoneName()
|
oldDate: null,
|
||||||
};
|
dlgdate: false,
|
||||||
},
|
//cache display format stuff
|
||||||
|
timeZoneName: window.$gz.locale.getBrowserTimeZoneName(),
|
||||||
|
languageName: window.$gz.locale.getBrowserLanguages(),
|
||||||
|
defaultLocale: window.$gz.locale.getBrowserFirstLanguage().split("-", 1)[0]
|
||||||
|
}),
|
||||||
props: {
|
props: {
|
||||||
label: String,
|
label: String,
|
||||||
rules: Array,
|
rules: Array,
|
||||||
"error-messages": { type: Array, default: null },
|
value: String,
|
||||||
value: { type: String, default: null },
|
|
||||||
readonly: { type: Boolean, default: false },
|
readonly: { type: Boolean, default: false },
|
||||||
disabled: { type: Boolean, default: false },
|
|
||||||
error: {
|
error: {
|
||||||
type: String,
|
type: String,
|
||||||
required: false
|
required: false
|
||||||
},
|
|
||||||
testId: String
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
dateValue() {
|
|
||||||
return window.$gz.locale.utcDateStringToLocal8601DateOnlyString(
|
|
||||||
this.value,
|
|
||||||
this.timeZoneName
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
watch: {
|
||||||
allErrors() {
|
date() {
|
||||||
let ret = "";
|
//this tortuous fuckery is required so that the input and change events only fire on a real change, not initial page load
|
||||||
if (this.error != null) {
|
//also it shouldn't signal a change if the values are the same and nothing was effectively changed
|
||||||
ret = this.error;
|
let hasChanged = false;
|
||||||
|
if (this.date != this.oldDate) {
|
||||||
|
hasChanged = true;
|
||||||
}
|
}
|
||||||
if (this.errorMessages != null && this.errorMessages.length > 0) {
|
this.oldDate = this.date;
|
||||||
ret += this.errorMessages.toString();
|
if (hasChanged) {
|
||||||
|
this.$emit("input", this.date); //always in UTC
|
||||||
}
|
}
|
||||||
return ret;
|
|
||||||
},
|
},
|
||||||
readonlyFormat() {
|
value() {
|
||||||
return window.$gz.locale.utcDateToShortDateLocalized(
|
this.date = this.value; //always in UTC
|
||||||
this.internalValue,
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
formatDateTime() {
|
||||||
|
return window.$gz.locale.utcDateToShortDateAndTimeLocalized(
|
||||||
|
this.value,
|
||||||
this.timeZoneName,
|
this.timeZoneName,
|
||||||
this.languageName,
|
this.languageName,
|
||||||
this.hour12
|
this.hour12
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
updateValue() {
|
formatDate() {
|
||||||
let vm = this;
|
return window.$gz.locale.utcDateToShortDateLocalized(
|
||||||
let dateValue = vm.$refs.dateField.$refs.input.value;
|
this.value,
|
||||||
if (!dateValue) {
|
this.timeZoneName,
|
||||||
let v = new Date();
|
this.languageName
|
||||||
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 = window.$gz.locale.utcDateStringToLocal8601TimeOnlyString(
|
|
||||||
vm.value,
|
|
||||||
vm.timeZoneName
|
|
||||||
);
|
);
|
||||||
if (!timeValue) {
|
},
|
||||||
timeValue = "00:00:00";
|
formatTime() {
|
||||||
}
|
return window.$gz.locale.utcDateToShortTimeLocalized(
|
||||||
|
this.value,
|
||||||
let ret = window.$gz.locale.localTimeDateStringToUTC8601String(
|
this.timeZoneName,
|
||||||
dateValue + "T" + timeValue,
|
this.languageName,
|
||||||
vm.timeZoneName
|
this.hour12
|
||||||
);
|
);
|
||||||
vm.$emit("input", ret);
|
},
|
||||||
|
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
|
||||||
|
);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
108
ayanova/src/components/date-native-control.vue
Normal file
108
ayanova/src/components/date-native-control.vue
Normal file
@@ -0,0 +1,108 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<template v-if="!readonly">
|
||||||
|
<v-text-field
|
||||||
|
ref="dateField"
|
||||||
|
:value="dateValue"
|
||||||
|
@change="updateValue()"
|
||||||
|
:readonly="readonly"
|
||||||
|
:disabled="disabled"
|
||||||
|
:label="label"
|
||||||
|
:rules="rules"
|
||||||
|
type="date"
|
||||||
|
:error-messages="allErrors()"
|
||||||
|
:data-cy="'dateinput:' + testId"
|
||||||
|
></v-text-field>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<v-text-field
|
||||||
|
:value="readonlyFormat()"
|
||||||
|
:label="label"
|
||||||
|
readonly
|
||||||
|
disabled
|
||||||
|
></v-text-field>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
/* Xeslint-disable */
|
||||||
|
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: {
|
||||||
|
dateValue() {
|
||||||
|
return window.$gz.locale.utcDateStringToLocal8601DateOnlyString(
|
||||||
|
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.utcDateToShortDateLocalized(
|
||||||
|
this.internalValue,
|
||||||
|
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 = window.$gz.locale.utcDateStringToLocal8601TimeOnlyString(
|
||||||
|
vm.value,
|
||||||
|
vm.timeZoneName
|
||||||
|
);
|
||||||
|
if (!timeValue) {
|
||||||
|
timeValue = "00:00:00";
|
||||||
|
}
|
||||||
|
|
||||||
|
let ret = window.$gz.locale.localTimeDateStringToUTC8601String(
|
||||||
|
dateValue + "T" + timeValue,
|
||||||
|
vm.timeZoneName
|
||||||
|
);
|
||||||
|
vm.$emit("input", ret);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
@@ -1,157 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<v-row 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="$ayiCalendarAlt"
|
|
||||||
@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">{{
|
|
||||||
$ay.t("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="$ayiCalendarAlt"
|
|
||||||
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 {
|
|
||||||
data: () => ({
|
|
||||||
date: null,
|
|
||||||
oldDate: null,
|
|
||||||
dlgdate: false,
|
|
||||||
//cache display format stuff
|
|
||||||
timeZoneName: window.$gz.locale.getBrowserTimeZoneName(),
|
|
||||||
languageName: window.$gz.locale.getBrowserLanguages(),
|
|
||||||
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
|
|
||||||
}
|
|
||||||
},
|
|
||||||
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) {
|
|
||||||
//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>
|
|
||||||
@@ -1,73 +1,97 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<template v-if="!readonly">
|
<v-row v-if="!readonly">
|
||||||
<v-text-field
|
<v-col cols="12">
|
||||||
ref="timeField"
|
<v-dialog v-model="dlgtime" persistent width="290px">
|
||||||
:value="timeValue"
|
<template v-slot:activator="{ on }">
|
||||||
@change="updateValue()"
|
<v-text-field
|
||||||
:readonly="readonly"
|
v-on="on"
|
||||||
:disabled="disabled"
|
v-model="formatTime"
|
||||||
:label="label"
|
v-bind:label="label"
|
||||||
:rules="rules"
|
prepend-icon="$ayiClock"
|
||||||
:error-messages="allErrors()"
|
@click:prepend="dlgtime = true"
|
||||||
type="time"
|
readonly
|
||||||
:data-cy="'timeinput:' + testId"
|
:error="!!error"
|
||||||
></v-text-field>
|
></v-text-field>
|
||||||
</template>
|
</template>
|
||||||
<template v-else>
|
<v-time-picker
|
||||||
<v-text-field
|
scrollable
|
||||||
:value="readonlyFormat()"
|
ampm-in-title
|
||||||
:label="label"
|
:format="hour12 ? 'ampm' : '24hr'"
|
||||||
readonly
|
v-model="timeOnly"
|
||||||
disabled
|
>
|
||||||
></v-text-field>
|
<v-spacer></v-spacer>
|
||||||
</template>
|
<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="$ayiCalendarAlt"
|
||||||
|
disabled
|
||||||
|
></v-text-field>
|
||||||
|
<p v-show="error" class="form__error v-messages theme--light error--text">
|
||||||
|
{{ error }}
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<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 {
|
export default {
|
||||||
data() {
|
data: () => ({
|
||||||
return {
|
date: null,
|
||||||
timeZoneName: window.$gz.locale.getBrowserTimeZoneName()
|
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: {
|
props: {
|
||||||
label: String,
|
label: String,
|
||||||
rules: Array,
|
rules: Array,
|
||||||
"error-messages": { type: Array, default: null },
|
value: String,
|
||||||
value: { type: String, default: null },
|
|
||||||
readonly: { type: Boolean, default: false },
|
readonly: { type: Boolean, default: false },
|
||||||
disabled: { type: Boolean, default: false },
|
|
||||||
error: {
|
error: {
|
||||||
type: String,
|
type: String,
|
||||||
required: false
|
required: false
|
||||||
},
|
|
||||||
testId: String
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
timeValue() {
|
|
||||||
return window.$gz.locale.utcDateStringToLocal8601TimeOnlyString(
|
|
||||||
this.value,
|
|
||||||
this.timeZoneName
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
watch: {
|
||||||
allErrors() {
|
date() {
|
||||||
let ret = "";
|
//this tortuous fuckery is required so that the input and change events only fire on a real change, not initial page load
|
||||||
if (this.error != null) {
|
//also it shouldn't signal a change if the values are the same and nothing was effectively changed
|
||||||
ret = this.error;
|
let hasChanged = false;
|
||||||
|
if (this.date != this.oldDate) {
|
||||||
|
hasChanged = true;
|
||||||
}
|
}
|
||||||
if (this.errorMessages != null && this.errorMessages.length > 0) {
|
this.oldDate = this.date;
|
||||||
ret += this.errorMessages.toString();
|
if (hasChanged) {
|
||||||
|
this.$emit("input", this.date); //always in UTC
|
||||||
|
//this.$emit("change", this.date); //always in UTC
|
||||||
}
|
}
|
||||||
return ret;
|
|
||||||
},
|
},
|
||||||
readonlyFormat() {
|
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(
|
return window.$gz.locale.utcDateToShortTimeLocalized(
|
||||||
this.value,
|
this.value,
|
||||||
this.timeZoneName,
|
this.timeZoneName,
|
||||||
@@ -75,36 +99,57 @@ export default {
|
|||||||
this.hour12
|
this.hour12
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
updateValue() {
|
dateOnly: {
|
||||||
let vm = this;
|
get() {
|
||||||
let dateValue = window.$gz.locale.utcDateStringToLocal8601DateOnlyString(
|
//return date only portion converted to local working time zone: YYYY-MM-DD
|
||||||
vm.value,
|
return window.$gz.locale.utcDateStringToLocal8601DateOnlyString(
|
||||||
vm.timeZoneName
|
this.value,
|
||||||
);
|
this.timeZoneName
|
||||||
if (!dateValue) {
|
);
|
||||||
let v = new Date();
|
},
|
||||||
let fullYear = v.getFullYear();
|
set(value) {
|
||||||
let fullMonth = v.getMonth() + 1;
|
//2017-08-15T12:10:34.4443084+03:00
|
||||||
if (fullMonth < 10) {
|
let TimePortion = this.timeOnly;
|
||||||
fullMonth = "0" + fullMonth.toString();
|
if (!TimePortion) {
|
||||||
|
TimePortion = "00:00:00";
|
||||||
}
|
}
|
||||||
let fullDay = v.getDate();
|
this.date = window.$gz.locale.localTimeDateStringToUTC8601String(
|
||||||
if (fullDay < 10) {
|
value + "T" + TimePortion,
|
||||||
fullDay = "0" + fullDay.toString();
|
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;
|
||||||
}
|
}
|
||||||
dateValue = fullYear + "-" + fullMonth + "-" + fullDay;
|
|
||||||
}
|
|
||||||
|
|
||||||
let timeValue = vm.$refs.timeField.$refs.input.value;
|
this.date = window.$gz.locale.localTimeDateStringToUTC8601String(
|
||||||
if (!timeValue) {
|
DatePortion + "T" + value,
|
||||||
timeValue = "00:00:00";
|
this.timeZoneName
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
let ret = window.$gz.locale.localTimeDateStringToUTC8601String(
|
|
||||||
dateValue + "T" + timeValue,
|
|
||||||
vm.timeZoneName
|
|
||||||
);
|
|
||||||
vm.$emit("input", ret);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
111
ayanova/src/components/time-native-control.vue
Normal file
111
ayanova/src/components/time-native-control.vue
Normal file
@@ -0,0 +1,111 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<template v-if="!readonly">
|
||||||
|
<v-text-field
|
||||||
|
ref="timeField"
|
||||||
|
:value="timeValue"
|
||||||
|
@change="updateValue()"
|
||||||
|
:readonly="readonly"
|
||||||
|
:disabled="disabled"
|
||||||
|
:label="label"
|
||||||
|
:rules="rules"
|
||||||
|
:error-messages="allErrors()"
|
||||||
|
type="time"
|
||||||
|
:data-cy="'timeinput:' + testId"
|
||||||
|
></v-text-field>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<v-text-field
|
||||||
|
:value="readonlyFormat()"
|
||||||
|
:label="label"
|
||||||
|
readonly
|
||||||
|
disabled
|
||||||
|
></v-text-field>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</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: {
|
||||||
|
timeValue() {
|
||||||
|
return 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.utcDateToShortTimeLocalized(
|
||||||
|
this.value,
|
||||||
|
this.timeZoneName,
|
||||||
|
this.languageName,
|
||||||
|
this.hour12
|
||||||
|
);
|
||||||
|
},
|
||||||
|
updateValue() {
|
||||||
|
let vm = this;
|
||||||
|
let dateValue = window.$gz.locale.utcDateStringToLocal8601DateOnlyString(
|
||||||
|
vm.value,
|
||||||
|
vm.timeZoneName
|
||||||
|
);
|
||||||
|
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>
|
||||||
@@ -1,156 +0,0 @@
|
|||||||
<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="$ayiClock"
|
|
||||||
@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="$ayiCalendarAlt"
|
|
||||||
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>
|
|
||||||
Reference in New Issue
Block a user