305 lines
9.6 KiB
Vue
305 lines
9.6 KiB
Vue
<template>
|
|
<div>
|
|
<v-layout row wrap v-if="!readonly">
|
|
<v-flex xs6>
|
|
<v-dialog v-model="dlgdate" persistent lazy full-width 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 v-model="dateOnly" @input="dlgdate = false">
|
|
<v-spacer></v-spacer>
|
|
<v-btn flat color="primary" @click="dlgdate = false">Close</v-btn>
|
|
</v-date-picker>
|
|
</v-dialog>
|
|
</v-flex>
|
|
<v-flex xs6>
|
|
<v-dialog v-model="dlgtime" persistent lazy full-width width="290px">
|
|
<template v-slot:activator="{ on }">
|
|
<v-text-field
|
|
v-on="on"
|
|
v-model="formatTime"
|
|
label
|
|
prepend-icon="fa-clock"
|
|
@click:prepend="dlgtime = true"
|
|
readonly
|
|
:error="!!error"
|
|
></v-text-field>
|
|
</template>
|
|
<v-time-picker v-model="timeOnly">
|
|
<v-spacer></v-spacer>
|
|
<v-btn flat color="primary" @click="dlgtime = false">OK</v-btn>
|
|
</v-time-picker>
|
|
</v-dialog>
|
|
</v-flex>
|
|
</v-layout>
|
|
<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 */
|
|
export default {
|
|
beforeCreate() {
|
|
//debugger;
|
|
//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, dlgtime: false }),
|
|
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
|
|
var hasChanged = false;
|
|
if (this.oldDate != null && 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>
|
|
|
|
//
|
|
<!--
|
|
|
|
// NOTE: this component was created based on a reddit query and answer below.
|
|
// Note also that the date and time coming in to this component are expected to be an ISO8601 format date and time string in UTC
|
|
// and it's kept in UTC and only localized temporarily for display and selection and update after selection in the date and time picker components
|
|
|
|
// re: combined date/time component
|
|
|
|
// from theRetrograde sent 4 hours ago
|
|
|
|
// We are using this in a dynamic form that will display a textbox, when the user clicks the textbox a modal opens to show the pickers.
|
|
// I'm not sure why it wouldn't be rendering initially.
|
|
// Here are the props we pass to the component, maybe this will help:
|
|
|
|
// <template v-else-if="get_field_type(key) == 'datetime'">
|
|
// <AppDateTimePicker
|
|
// v-model="editedItem[key]"
|
|
// v-bind:key="key"
|
|
// v-bind:readonly="is_readonly(key)"
|
|
// v-bind:label="pretty_field(key)">
|
|
// </AppDateTimePicker>
|
|
// </template>
|
|
|
|
|
|
// <template>
|
|
// <div>
|
|
// <v-layout row wrap v-if="!readonly">
|
|
// <v-flex xs6>
|
|
// <v-dialog v-model="modal" persistent lazy full-width width="290px">
|
|
// <v-text-field
|
|
// slot="activator"
|
|
// v-model="formatDate"
|
|
// v-bind:label="label"
|
|
// prepend-icon="event"
|
|
// readonly
|
|
// ></v-text-field>
|
|
// <v-date-picker v-model="dateOnly" @input="modal = false">
|
|
// <v-spacer></v-spacer>
|
|
// <v-btn flat color="primary" @click="modal = false">Close</v-btn>
|
|
// </v-date-picker>
|
|
// </v-dialog>
|
|
// </v-flex>
|
|
// <v-flex xs6>
|
|
// <v-dialog v-model="modal2" persistent lazy full-width width="290px">
|
|
// <v-text-field
|
|
// slot="activator"
|
|
// v-model="formatTime"
|
|
// label
|
|
// prepend-icon="access_time"
|
|
// readonly
|
|
// ></v-text-field>
|
|
// <v-time-picker v-model="timeOnly">
|
|
// <v-spacer></v-spacer>
|
|
// <v-btn flat color="primary" @click="modal2 = false">OK</v-btn>
|
|
// </v-time-picker>
|
|
// </v-dialog>
|
|
// </v-flex>
|
|
// </v-layout>
|
|
// <v-text-field
|
|
// v-else
|
|
// v-model="formatDateTime"
|
|
// v-bind:label="label"
|
|
// prepend-icon="event"
|
|
// disabled
|
|
// ></v-text-field>
|
|
// </div>
|
|
// </template>
|
|
|
|
// // <script>
|
|
// // export default {
|
|
// // data: () => ({ date: null, modal: false, modal2: false }),
|
|
// // props: { label: String, value: String, readonly: Boolean },
|
|
// // watch: {
|
|
// // date() {
|
|
// // this.$emit("input", this.date);
|
|
// // },
|
|
// // value() {
|
|
// // this.date = this.value;
|
|
// // }
|
|
// // },
|
|
// // computed: {
|
|
// // formatDateTime() {
|
|
// // let momentObj = this.$moment.utc();
|
|
// // if (this.value) {
|
|
// // momentObj = this.$moment.utc(this.value);
|
|
// // }
|
|
// // return momentObj.local().format("dddd MM/DD/YYYY h:mm a");
|
|
// // },
|
|
// // formatDate() {
|
|
// // let momentObj = this.$moment.utc();
|
|
// // if (this.value) {
|
|
// // momentObj = this.$moment.utc(this.value);
|
|
// // }
|
|
// // return momentObj.local().format("dddd MM/DD/YYYY");
|
|
// // },
|
|
// // dateOnly: {
|
|
// // get() {
|
|
// // let momentObj = this.$moment.utc();
|
|
// // if (this.value) {
|
|
// // momentObj = this.$moment.utc(this.value);
|
|
// // }
|
|
// // return momentObj.local().format("YYYY-MM-DD");
|
|
// // },
|
|
// // set(value) {
|
|
// // this.date = value + " " + this.timeOnly;
|
|
// // }
|
|
// // },
|
|
// // timeOnly: {
|
|
// // get() {
|
|
// // let momentObj = this.$moment.utc();
|
|
// // if (this.value) {
|
|
// // momentObj = this.$moment.utc(this.value);
|
|
// // }
|
|
// // return momentObj.local().format("HH:mm:ss");
|
|
// // },
|
|
// // set(value) {
|
|
// // this.date = this.dateOnly + " " + value;
|
|
// // }
|
|
// // },
|
|
// // formatTime() {
|
|
// // let momentObj = this.$moment.utc();
|
|
// // if (this.value) {
|
|
// // momentObj = this.$moment.utc(this.value);
|
|
// // }
|
|
// // return momentObj.local().format("h:mm a");
|
|
// // }
|
|
// // }
|
|
// // };
|
|
// // </script>
|
|
// -->
|