This commit is contained in:
@@ -79,20 +79,6 @@
|
||||
<script>
|
||||
/* Xeslint-disable */
|
||||
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: () => ({
|
||||
date: null,
|
||||
oldDate: null,
|
||||
@@ -146,12 +132,6 @@ export default {
|
||||
this.languageName,
|
||||
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() {
|
||||
return window.$gz.locale.utcDateToShortDateLocalized(
|
||||
@@ -159,12 +139,6 @@ export default {
|
||||
this.timeZoneName,
|
||||
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() {
|
||||
return window.$gz.locale.utcDateToShortTimeLocalized(
|
||||
@@ -173,47 +147,14 @@ export default {
|
||||
this.languageName,
|
||||
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: {
|
||||
//----------------------------
|
||||
// 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() {
|
||||
//TODO: return date only portion converted to local working time zone: YYYY-MM-DD
|
||||
|
||||
var v = window.$gz.locale.utcDateStringToLocal8601DateOnlyString(
|
||||
//return date only portion converted to local working time zone: YYYY-MM-DD
|
||||
return window.$gz.locale.utcDateStringToLocal8601DateOnlyString(
|
||||
this.value,
|
||||
this.timeZoneName
|
||||
);
|
||||
console.log(this.value);
|
||||
console.log(v);
|
||||
return v;
|
||||
},
|
||||
set(value) {
|
||||
this.date = window.$gz.locale.localTimeDateStringToUTC8601String(
|
||||
|
||||
@@ -44,23 +44,15 @@
|
||||
/* 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 {
|
||||
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: () => ({
|
||||
date: null,
|
||||
oldDate: null,
|
||||
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"
|
||||
}),
|
||||
props: {
|
||||
@@ -98,206 +90,60 @@ export default {
|
||||
},
|
||||
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)
|
||||
: "";
|
||||
return window.$gz.locale.utcDateToShortDateAndTimeLocalized(
|
||||
this.value,
|
||||
this.timeZoneName,
|
||||
this.languageName,
|
||||
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)
|
||||
// : "";
|
||||
// },
|
||||
formatTime() {
|
||||
return this.value
|
||||
? window.$gz.dayjs
|
||||
.utc(this.value)
|
||||
.add(window.$gz.locale.format().timeZoneOffset, "hour")
|
||||
.format(window.$gz.locale.format().shortTime)
|
||||
: "";
|
||||
return window.$gz.locale.utcDateToShortTimeLocalized(
|
||||
this.value,
|
||||
this.timeZoneName,
|
||||
this.languageName,
|
||||
this.hour12
|
||||
);
|
||||
},
|
||||
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;
|
||||
//return date only portion converted to local working time zone: YYYY-MM-DD
|
||||
return window.$gz.locale.utcDateStringToLocal8601DateOnlyString(
|
||||
this.value,
|
||||
this.timeZoneName
|
||||
);
|
||||
},
|
||||
set(value) {
|
||||
this.date = window.$gz.dayjs
|
||||
.utc(value + " " + this.timeOnly)
|
||||
.subtract(window.$gz.locale.format().timeZoneOffset, "hour")
|
||||
.toISOString();
|
||||
this.date = window.$gz.locale.localTimeDateStringToUTC8601String(
|
||||
value + "T" + this.timeOnly,
|
||||
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() {
|
||||
//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;
|
||||
return window.$gz.locale.utcDateStringToLocal8601TimeOnlyString(
|
||||
this.value,
|
||||
this.timeZoneName
|
||||
);
|
||||
},
|
||||
set(value) {
|
||||
this.date = window.$gz.dayjs
|
||||
.utc(this.dateOnly + " " + value)
|
||||
.subtract(window.$gz.locale.format().timeZoneOffset, "hour")
|
||||
.toISOString();
|
||||
this.date = window.$gz.locale.localTimeDateStringToUTC8601String(
|
||||
this.dateOnly + "T" + value,
|
||||
this.timeZoneName
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</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