Ported date control back to vuetify custom
This commit is contained in:
@@ -1,21 +1,30 @@
|
||||
<template>
|
||||
<div>
|
||||
<v-row v-if="!readonly">
|
||||
<v-row>
|
||||
<template v-if="!readonly">
|
||||
<v-col cols="12">
|
||||
<v-dialog v-model="dlgdate" persistent width="290px">
|
||||
<v-dialog v-model="dlgdate" width="290px">
|
||||
<template v-slot:activator="{ on }">
|
||||
<v-text-field
|
||||
v-on="on"
|
||||
prepend-icon="$ayiCalendarAlt"
|
||||
@click:prepend="dlgdate = true"
|
||||
v-model="formatDate"
|
||||
:value="dateValue"
|
||||
v-bind:label="label"
|
||||
v-bind:rules="rules"
|
||||
readonly
|
||||
:error="!!error"
|
||||
:data-cy="'dtfpick:' + testId"
|
||||
></v-text-field>
|
||||
</template>
|
||||
<v-date-picker :locale="defaultLocale" v-model="dateOnly">
|
||||
<v-date-picker
|
||||
:value="dateValue"
|
||||
@input="updateDateValue"
|
||||
:locale="defaultLocale"
|
||||
:data-cy="'dpick:' + testId"
|
||||
>
|
||||
<v-btn text color="primary" @click="$emit('input', null)">{{
|
||||
$ay.t("Delete")
|
||||
}}</v-btn>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn text color="primary" @click="dlgdate = false">{{
|
||||
$ay.t("OK")
|
||||
@@ -23,26 +32,26 @@
|
||||
</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>
|
||||
<template v-else>
|
||||
<v-text-field
|
||||
:value="readonlyFormat()"
|
||||
:label="label"
|
||||
readonly
|
||||
disabled
|
||||
prepend-icon="$ayiCalendarAlt"
|
||||
></v-text-field>
|
||||
<p v-show="error" class="form__error v-messages theme--light error--text">
|
||||
{{ error }}
|
||||
</p>
|
||||
</template>
|
||||
</v-row>
|
||||
</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(),
|
||||
@@ -52,32 +61,42 @@ export default {
|
||||
props: {
|
||||
label: String,
|
||||
rules: Array,
|
||||
value: String,
|
||||
"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
|
||||
}
|
||||
},
|
||||
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
|
||||
}
|
||||
testId: String
|
||||
},
|
||||
computed: {
|
||||
formatDateTime() {
|
||||
timeValue() {
|
||||
return window.$gz.locale.utcDateStringToLocal8601TimeOnlyString(
|
||||
this.value,
|
||||
this.timeZoneName
|
||||
);
|
||||
},
|
||||
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.utcDateToShortDateAndTimeLocalized(
|
||||
this.value,
|
||||
this.timeZoneName,
|
||||
@@ -85,72 +104,36 @@ export default {
|
||||
this.hour12
|
||||
);
|
||||
},
|
||||
formatDate() {
|
||||
return window.$gz.locale.utcDateToShortDateLocalized(
|
||||
this.value,
|
||||
this.timeZoneName,
|
||||
this.languageName
|
||||
);
|
||||
updateDateValue(v) {
|
||||
this.updateValue(v, this.timeValue);
|
||||
this.dlgdate = false;
|
||||
},
|
||||
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();
|
||||
}
|
||||
updateValue(theDate, theTime) {
|
||||
let vm = this;
|
||||
|
||||
DatePortion = fullYear + "-" + fullMonth + "-" + fullDay;
|
||||
if (!theDate) {
|
||||
let v = new Date();
|
||||
let fullYear = v.getFullYear();
|
||||
let fullMonth = v.getMonth() + 1;
|
||||
if (fullMonth < 10) {
|
||||
fullMonth = "0" + fullMonth.toString();
|
||||
}
|
||||
|
||||
this.date = window.$gz.locale.localTimeDateStringToUTC8601String(
|
||||
DatePortion + "T" + value,
|
||||
this.timeZoneName
|
||||
);
|
||||
let fullDay = v.getDate();
|
||||
if (fullDay < 10) {
|
||||
fullDay = "0" + fullDay.toString();
|
||||
}
|
||||
theDate = fullYear + "-" + fullMonth + "-" + fullDay;
|
||||
}
|
||||
|
||||
if (!theTime) {
|
||||
theTime = "00:00:00";
|
||||
}
|
||||
|
||||
let ret = window.$gz.locale.localTimeDateStringToUTC8601String(
|
||||
theDate + "T" + theTime,
|
||||
vm.timeZoneName
|
||||
);
|
||||
vm.$emit("input", ret);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<v-row>
|
||||
<template v-if="!readonly">
|
||||
<v-col xs6>
|
||||
<v-dialog ref="theDateDialog" v-model="dlgdate" width="290px">
|
||||
<v-dialog v-model="dlgdate" width="290px">
|
||||
<template v-slot:activator="{ on }">
|
||||
<v-text-field
|
||||
v-on="on"
|
||||
@@ -18,7 +18,6 @@
|
||||
</template>
|
||||
<v-date-picker
|
||||
:value="dateValue"
|
||||
ref="dateField"
|
||||
@input="updateDateValue"
|
||||
:locale="defaultLocale"
|
||||
:data-cy="'dpick:' + testId"
|
||||
@@ -34,7 +33,7 @@
|
||||
</v-dialog>
|
||||
</v-col>
|
||||
<v-col xs6>
|
||||
<v-dialog ref="theTimeDialog" v-model="dlgtime" width="290px">
|
||||
<v-dialog v-model="dlgtime" width="290px">
|
||||
<template v-slot:activator="{ on }">
|
||||
<v-text-field
|
||||
v-on="on"
|
||||
@@ -53,7 +52,6 @@
|
||||
:format="hour12 ? 'ampm' : '24hr'"
|
||||
:value="timeValue"
|
||||
@input="updateTimeValue"
|
||||
ref="timeField"
|
||||
:data-cy="'tpick:' + testId"
|
||||
>
|
||||
<v-btn text color="primary" @click="$emit('input', null)">{{
|
||||
@@ -106,7 +104,6 @@ export default {
|
||||
},
|
||||
testId: String
|
||||
},
|
||||
|
||||
computed: {
|
||||
timeValue() {
|
||||
return window.$gz.locale.utcDateStringToLocal8601TimeOnlyString(
|
||||
|
||||
Reference in New Issue
Block a user