This commit is contained in:
@@ -79,20 +79,6 @@
|
|||||||
<script>
|
<script>
|
||||||
/* Xeslint-disable */
|
/* Xeslint-disable */
|
||||||
export default {
|
export default {
|
||||||
// created() {
|
|
||||||
// debugger;
|
|
||||||
// },
|
|
||||||
beforeCreate() {
|
|
||||||
//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: () => ({
|
data: () => ({
|
||||||
date: null,
|
date: null,
|
||||||
oldDate: null,
|
oldDate: null,
|
||||||
@@ -146,12 +132,6 @@ export default {
|
|||||||
this.languageName,
|
this.languageName,
|
||||||
this.hour12
|
this.hour12
|
||||||
);
|
);
|
||||||
// return this.value
|
|
||||||
// ? window.$gz.dayjs
|
|
||||||
// .utc(this.value)
|
|
||||||
// .add(window.$gz.locale.format().timeZoneOffset, "hour")
|
|
||||||
// .format(window.$gz.locale.format().shortDateAndTime)
|
|
||||||
// : "";
|
|
||||||
},
|
},
|
||||||
formatDate() {
|
formatDate() {
|
||||||
return window.$gz.locale.utcDateToShortDateLocalized(
|
return window.$gz.locale.utcDateToShortDateLocalized(
|
||||||
@@ -159,12 +139,6 @@ export default {
|
|||||||
this.timeZoneName,
|
this.timeZoneName,
|
||||||
this.languageName
|
this.languageName
|
||||||
);
|
);
|
||||||
// return this.value
|
|
||||||
// ? window.$gz.dayjs
|
|
||||||
// .utc(this.value)
|
|
||||||
// .add(window.$gz.locale.format().timeZoneOffset, "hour")
|
|
||||||
// .format(window.$gz.locale.format().shortDate)
|
|
||||||
// : "";
|
|
||||||
},
|
},
|
||||||
formatTime() {
|
formatTime() {
|
||||||
return window.$gz.locale.utcDateToShortTimeLocalized(
|
return window.$gz.locale.utcDateToShortTimeLocalized(
|
||||||
@@ -173,47 +147,14 @@ export default {
|
|||||||
this.languageName,
|
this.languageName,
|
||||||
this.hour12
|
this.hour12
|
||||||
);
|
);
|
||||||
// return this.value
|
|
||||||
// ? window.$gz.dayjs
|
|
||||||
// .utc(this.value)
|
|
||||||
// .add(window.$gz.locale.format().timeZoneOffset, "hour")
|
|
||||||
// .format(window.$gz.locale.format().shortTime)
|
|
||||||
// : "";
|
|
||||||
},
|
},
|
||||||
dateOnly: {
|
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();
|
|
||||||
// }
|
|
||||||
//---------------------------
|
|
||||||
get() {
|
get() {
|
||||||
//TODO: return date only portion converted to local working time zone: YYYY-MM-DD
|
//return date only portion converted to local working time zone: YYYY-MM-DD
|
||||||
|
return window.$gz.locale.utcDateStringToLocal8601DateOnlyString(
|
||||||
var v = window.$gz.locale.utcDateStringToLocal8601DateOnlyString(
|
|
||||||
this.value,
|
this.value,
|
||||||
this.timeZoneName
|
this.timeZoneName
|
||||||
);
|
);
|
||||||
console.log(this.value);
|
|
||||||
console.log(v);
|
|
||||||
return v;
|
|
||||||
},
|
},
|
||||||
set(value) {
|
set(value) {
|
||||||
this.date = window.$gz.locale.localTimeDateStringToUTC8601String(
|
this.date = window.$gz.locale.localTimeDateStringToUTC8601String(
|
||||||
|
|||||||
@@ -44,23 +44,15 @@
|
|||||||
/* Xeslint-disable */
|
/* 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 */
|
//******************************** 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 {
|
||||||
beforeCreate() {
|
|
||||||
//debugger;
|
|
||||||
//this is a nothing line as a test
|
|
||||||
//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: () => ({
|
data: () => ({
|
||||||
date: null,
|
date: null,
|
||||||
oldDate: null,
|
oldDate: null,
|
||||||
dlgtime: false,
|
dlgtime: false,
|
||||||
|
//cache display format stuff
|
||||||
|
timeZoneName: window.$gz.locale.getTimeZoneName(),
|
||||||
|
languageName: window.$gz.locale.getBrowserLanguages(),
|
||||||
|
hour12: window.$gz.store.state.locale.hour12,
|
||||||
|
defaultLocale: window.$gz.locale.getBrowserFirstLanguage().split("-", 1)[0],
|
||||||
ampmFormat: window.$gz.locale.format().hour12 ? "ampm" : "24hr"
|
ampmFormat: window.$gz.locale.format().hour12 ? "ampm" : "24hr"
|
||||||
}),
|
}),
|
||||||
props: {
|
props: {
|
||||||
@@ -98,206 +90,60 @@ export default {
|
|||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
formatDateTime() {
|
formatDateTime() {
|
||||||
return this.value
|
return window.$gz.locale.utcDateToShortDateAndTimeLocalized(
|
||||||
? window.$gz.dayjs
|
this.value,
|
||||||
.utc(this.value)
|
this.timeZoneName,
|
||||||
.add(window.$gz.locale.format().timeZoneOffset, "hour")
|
this.languageName,
|
||||||
.format(window.$gz.locale.format().shortDateAndTime)
|
this.hour12
|
||||||
: "";
|
);
|
||||||
},
|
|
||||||
formatDate() {
|
|
||||||
return this.value
|
|
||||||
? window.$gz.dayjs
|
|
||||||
.utc(this.value)
|
|
||||||
.add(window.$gz.locale.format().timeZoneOffset, "hour")
|
|
||||||
.format(window.$gz.locale.format().shortDate)
|
|
||||||
: "";
|
|
||||||
},
|
},
|
||||||
|
// formatDate() {
|
||||||
|
// return this.value
|
||||||
|
// ? window.$gz.dayjs
|
||||||
|
// .utc(this.value)
|
||||||
|
// .add(window.$gz.locale.format().timeZoneOffset, "hour")
|
||||||
|
// .format(window.$gz.locale.format().shortDate)
|
||||||
|
// : "";
|
||||||
|
// },
|
||||||
formatTime() {
|
formatTime() {
|
||||||
return this.value
|
return window.$gz.locale.utcDateToShortTimeLocalized(
|
||||||
? window.$gz.dayjs
|
this.value,
|
||||||
.utc(this.value)
|
this.timeZoneName,
|
||||||
.add(window.$gz.locale.format().timeZoneOffset, "hour")
|
this.languageName,
|
||||||
.format(window.$gz.locale.format().shortTime)
|
this.hour12
|
||||||
: "";
|
);
|
||||||
},
|
},
|
||||||
dateOnly: {
|
dateOnly: {
|
||||||
get() {
|
get() {
|
||||||
//TODO: this will likely need an improvement for forms where there should be an automatic pre-set time chosen like workorder labor;
|
//return date only portion converted to local working time zone: YYYY-MM-DD
|
||||||
var defaultDateString = window.$gz
|
return window.$gz.locale.utcDateStringToLocal8601DateOnlyString(
|
||||||
.dayjs()
|
this.value,
|
||||||
.utc()
|
this.timeZoneName
|
||||||
.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) {
|
set(value) {
|
||||||
this.date = window.$gz.dayjs
|
this.date = window.$gz.locale.localTimeDateStringToUTC8601String(
|
||||||
.utc(value + " " + this.timeOnly)
|
value + "T" + this.timeOnly,
|
||||||
.subtract(window.$gz.locale.format().timeZoneOffset, "hour")
|
this.timeZoneName
|
||||||
.toISOString();
|
);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
timeOnly: {
|
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() {
|
get() {
|
||||||
//TODO: this will likely need an improvement for forms where there should be an automatic pre-set time chosen like workorder labor;
|
return window.$gz.locale.utcDateStringToLocal8601TimeOnlyString(
|
||||||
var defaultTimeString = window.$gz.dayjs
|
this.value,
|
||||||
.utc()
|
this.timeZoneName
|
||||||
.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) {
|
set(value) {
|
||||||
this.date = window.$gz.dayjs
|
this.date = window.$gz.locale.localTimeDateStringToUTC8601String(
|
||||||
.utc(this.dateOnly + " " + value)
|
this.dateOnly + "T" + value,
|
||||||
.subtract(window.$gz.locale.format().timeZoneOffset, "hour")
|
this.timeZoneName
|
||||||
.toISOString();
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</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>
|
|
||||||
// -->
|
|
||||||
|
|||||||
Reference in New Issue
Block a user