This commit is contained in:
@@ -40,14 +40,16 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
/* eslint-disable */
|
||||
/* Xeslint-disable */
|
||||
export default {
|
||||
beforeCreate() {
|
||||
//created() {
|
||||
//check pre-requisites exist just in case
|
||||
if (!this.$dayjs) {
|
||||
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 }),
|
||||
props: {
|
||||
@@ -113,132 +115,133 @@ export default {
|
||||
};
|
||||
</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
|
||||
// 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
|
||||
// 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.
|
||||
I'm not sure why it wouldn't be rendering initially.
|
||||
Here are the props we pass to the component, maybe this will help:
|
||||
// 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 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>
|
||||
// <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>-->
|
||||
// // <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