admin/raven-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Browse Source
This commit is contained in:
John Cardinal
2020-02-06 21:04:00 +00:00
parent dbb0f4be1f
commit 2e8d6945f7
1 changed files with 32 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files

182
ayanova/src/components/date-time-control.vue
View File

@@ -21,7 +21,6 @@
></v-text-field> ></v-text-field>
</template> </template>
<v-date-picker <v-date-picker
ref="theDatePicker"
v-model="dateOnly" v-model="dateOnly"
@input="dlgdate = false" @input="dlgdate = false"
:locale="defaultLocale" :locale="defaultLocale"
@@ -52,7 +51,6 @@
></v-text-field> ></v-text-field>
</template> </template>
<v-time-picker <v-time-picker
ref="theTimePicker"
scrollable scrollable
ampm-in-title ampm-in-title
:format="ampmFormat" :format="ampmFormat"
@@ -206,159 +204,43 @@ export default {
} }
}, },
timeOnly: { timeOnly: {
get() { //The control needs this value in ISO 8601 format but adjusted to user time zone
//TODO: this will likely need an improvement for forms where there should be an automatic pre-set time chosen like workorder labor; //------------originally
var defaultTimeString = window.$gz.dayjs // get() {
.utc() // var defaultTimeString = window.$gz.dayjs
.add(window.$gz.locale.format().timeZoneOffset, "hour") // .utc()
.format("HH:mm:ss"); // .add(window.$gz.locale.format().timeZoneOffset, "hour")
// .format("HH:mm:ss");
return this.value // return this.value
? window.$gz.dayjs // ? window.$gz.dayjs
.utc(this.value) // .utc(this.value)
.add(window.$gz.locale.format().timeZoneOffset, "hour") // .add(window.$gz.locale.format().timeZoneOffset, "hour")
.format("HH:mm:ss") // .format("HH:mm:ss")
: defaultTimeString; // : defaultTimeString;
// },
// set(value) {
// this.date = window.$gz.dayjs
// .utc(this.dateOnly + " " + value)
// .subtract(window.$gz.locale.format().timeZoneOffset, "hour")
// .toISOString();
// }
//-----------------
//expects just the hours minutes seconds portion: 18:18:49
//TODO: Need to convert to desired time zone first or the control will show the UTC time instead
get() {
if (this.value) {
console.log(this.value.substr(11, 8));
return this.value.substr(11, 8);
} else {
return "";
}
}, },
set(value) { set(value) {
this.date = window.$gz.dayjs this.value = value;
.utc(this.dateOnly + " " + value)
.subtract(window.$gz.locale.format().timeZoneOffset, "hour")
.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>
// -->