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
2019-03-06 20:56:13 +00:00
parent a6706864bf
commit 60717ac8e0
1 changed files with 126 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

249
ayanova/src/components/gzdateandtimepicker.vue
View File

@@ -40,14 +40,16 @@
</div> </div>
</template> </template>
<script> <script>
/* eslint-disable */ /* Xeslint-disable */
export default { export default {
beforeCreate() { beforeCreate() {
//created() {
//check pre-requisites exist just in case //check pre-requisites exist just in case
if (!this.$dayjs) { if (!this.$dayjs) {
throw "GzDateAndTimePicker: the DayJS library is required and missing"; throw "GzDateAndTimePicker: the DayJS library is required and missing";
} }
if (!this.$gzlocale) {
throw "GzDateAndTimePicker: $gzlocale is required and missing";
}
}, },
data: () => ({ date: null, modal: false, modal2: false }), data: () => ({ date: null, modal: false, modal2: false }),
props: { props: {
@@ -113,132 +115,133 @@ export default {
}; };
</script> </script>
<!-- // <!--
NOTE: this component was created based on a reddit query and answer below. // 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 // 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 // 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 // re: combined date/time component
from theRetrograde sent 4 hours ago // 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. // 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. // I'm not sure why it wouldn't be rendering initially.
Here are the props we pass to the component, maybe this will help: // Here are the props we pass to the component, maybe this will help:
<template v-else-if="get_field_type(key) == 'datetime'"> // <template v-else-if="get_field_type(key) == 'datetime'">
<AppDateTimePicker // <AppDateTimePicker
v-model="editedItem[key]" // v-model="editedItem[key]"
v-bind:key="key" // v-bind:key="key"
v-bind:readonly="is_readonly(key)" // v-bind:readonly="is_readonly(key)"
v-bind:label="pretty_field(key)"> // v-bind:label="pretty_field(key)">
</AppDateTimePicker> // </AppDateTimePicker>
</template> // </template>
<template> // <template>
<div> // <div>
<v-layout row wrap v-if="!readonly"> // <v-layout row wrap v-if="!readonly">
<v-flex xs6> // <v-flex xs6>
<v-dialog v-model="modal" persistent lazy full-width width="290px"> // <v-dialog v-model="modal" persistent lazy full-width width="290px">
<v-text-field // <v-text-field
slot="activator" // slot="activator"
v-model="formatDate" // v-model="formatDate"
v-bind:label="label" // v-bind:label="label"
prepend-icon="event" // prepend-icon="event"
readonly // readonly
></v-text-field> // ></v-text-field>
<v-date-picker v-model="dateOnly" @input="modal = false"> // <v-date-picker v-model="dateOnly" @input="modal = false">
<v-spacer></v-spacer> // <v-spacer></v-spacer>
<v-btn flat color="primary" @click="modal = false">Close</v-btn> // <v-btn flat color="primary" @click="modal = false">Close</v-btn>
</v-date-picker> // </v-date-picker>
</v-dialog> // </v-dialog>
</v-flex> // </v-flex>
<v-flex xs6> // <v-flex xs6>
<v-dialog v-model="modal2" persistent lazy full-width width="290px"> // <v-dialog v-model="modal2" persistent lazy full-width width="290px">
<v-text-field // <v-text-field
slot="activator" // slot="activator"
v-model="formatTime" // v-model="formatTime"
label // label
prepend-icon="access_time" // prepend-icon="access_time"
readonly // readonly
></v-text-field> // ></v-text-field>
<v-time-picker v-model="timeOnly"> // <v-time-picker v-model="timeOnly">
<v-spacer></v-spacer> // <v-spacer></v-spacer>
<v-btn flat color="primary" @click="modal2 = false">OK</v-btn> // <v-btn flat color="primary" @click="modal2 = false">OK</v-btn>
</v-time-picker> // </v-time-picker>
</v-dialog> // </v-dialog>
</v-flex> // </v-flex>
</v-layout> // </v-layout>
<v-text-field // <v-text-field
v-else // v-else
v-model="formatDateTime" // v-model="formatDateTime"
v-bind:label="label" // v-bind:label="label"
prepend-icon="event" // prepend-icon="event"
disabled // disabled
></v-text-field> // ></v-text-field>
</div> // </div>
</template> // </template>
// <script> // // <script>
// export default { // // export default {
// data: () => ({ date: null, modal: false, modal2: false }), // // data: () => ({ date: null, modal: false, modal2: false }),
// props: { label: String, value: String, readonly: Boolean }, // // props: { label: String, value: String, readonly: Boolean },
// watch: { // // watch: {
// date() { // // date() {
// this.$emit("input", this.date); // // this.$emit("input", this.date);
// }, // // },
// value() { // // value() {
// this.date = this.value; // // this.date = this.value;
// } // // }
// }, // // },
// computed: { // // computed: {
// formatDateTime() { // // formatDateTime() {
// let momentObj = this.$moment.utc(); // // let momentObj = this.$moment.utc();
// if (this.value) { // // if (this.value) {
// momentObj = this.$moment.utc(this.value); // // momentObj = this.$moment.utc(this.value);
// } // // }
// return momentObj.local().format("dddd MM/DD/YYYY h:mm a"); // // return momentObj.local().format("dddd MM/DD/YYYY h:mm a");
// }, // // },
// formatDate() { // // formatDate() {
// let momentObj = this.$moment.utc(); // // let momentObj = this.$moment.utc();
// if (this.value) { // // if (this.value) {
// momentObj = this.$moment.utc(this.value); // // momentObj = this.$moment.utc(this.value);
// } // // }
// return momentObj.local().format("dddd MM/DD/YYYY"); // // return momentObj.local().format("dddd MM/DD/YYYY");
// }, // // },
// dateOnly: { // // dateOnly: {
// get() { // // get() {
// let momentObj = this.$moment.utc(); // // let momentObj = this.$moment.utc();
// if (this.value) { // // if (this.value) {
// momentObj = this.$moment.utc(this.value); // // momentObj = this.$moment.utc(this.value);
// } // // }
// return momentObj.local().format("YYYY-MM-DD"); // // return momentObj.local().format("YYYY-MM-DD");
// }, // // },
// set(value) { // // set(value) {
// this.date = value + " " + this.timeOnly; // // this.date = value + " " + this.timeOnly;
// } // // }
// }, // // },
// timeOnly: { // // timeOnly: {
// get() { // // get() {
// let momentObj = this.$moment.utc(); // // let momentObj = this.$moment.utc();
// if (this.value) { // // if (this.value) {
// momentObj = this.$moment.utc(this.value); // // momentObj = this.$moment.utc(this.value);
// } // // }
// return momentObj.local().format("HH:mm:ss"); // // return momentObj.local().format("HH:mm:ss");
// }, // // },
// set(value) { // // set(value) {
// this.date = this.dateOnly + " " + value; // // this.date = this.dateOnly + " " + value;
// } // // }
// }, // // },
// formatTime() { // // formatTime() {
// let momentObj = this.$moment.utc(); // // let momentObj = this.$moment.utc();
// if (this.value) { // // if (this.value) {
// momentObj = this.$moment.utc(this.value); // // momentObj = this.$moment.utc(this.value);
// } // // }
// return momentObj.local().format("h:mm a"); // // return momentObj.local().format("h:mm a");
// } // // }
// } // // }
// }; // // };
// </script>--> // // </script>
// -->