242 lines
7.1 KiB
Vue
242 lines
7.1 KiB
Vue
<template>
|
|
<div>
|
|
<v-layout row wrap v-if="!readonly">
|
|
<v-flex xs6>
|
|
<v-dialog v-model="modal" persistent lazy full-width width="290px">
|
|
<template v-slot:activator="{ on }">
|
|
<v-text-field
|
|
v-on="on"
|
|
prepend-icon="fa-calendar-alt"
|
|
v-model="formatDate"
|
|
v-bind:label="label"
|
|
readonly
|
|
></v-text-field>
|
|
</template>
|
|
<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">
|
|
<template v-slot:activator="{ on }">
|
|
<v-text-field v-on="on" v-model="formatTime" label prepend-icon="fa-clock" readonly></v-text-field>
|
|
</template>
|
|
<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-if="readonly"
|
|
v-model="formatDateTime"
|
|
v-bind:label="label"
|
|
prepend-icon="fa-calendar-alt"
|
|
disabled
|
|
></v-text-field>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
/* eslint-disable */
|
|
export default {
|
|
beforeCreate() {
|
|
console.log("Nothing gets called before me!");
|
|
},
|
|
data: () => ({ date: null, modal: false, modal2: false }),
|
|
props: {
|
|
label: String,
|
|
value: String,
|
|
readonly: { type: Boolean, default: false },
|
|
//dayjs: Function,
|
|
locale: Object
|
|
},
|
|
watch: {
|
|
date() {
|
|
this.$emit("input", this.date); //always in UTC
|
|
},
|
|
value() {
|
|
this.date = this.value; //always in UTC
|
|
}
|
|
},
|
|
computed: {
|
|
formatDateTime() {
|
|
return this.value
|
|
? this.$dayjs(this.value)
|
|
.add(this.locale.timeZoneOffset, "hour")
|
|
.format(this.locale.formats.shortDateAndTime)
|
|
: "";
|
|
},
|
|
formatDate() {
|
|
return this.value
|
|
? this.$dayjs(this.value)
|
|
.add(this.locale.timeZoneOffset, "hour")
|
|
.format(this.locale.formats.shortDate)
|
|
: "";
|
|
},
|
|
formatTime() {
|
|
return this.value
|
|
? this.$dayjs(this.value)
|
|
.add(this.locale.timeZoneOffset, "hour")
|
|
.format(this.locale.formats.shortTime)
|
|
: "";
|
|
},
|
|
dateOnly: {
|
|
get() {
|
|
return this.$dayjs(this.value)
|
|
.add(this.locale.timeZoneOffset, "hour")
|
|
.format("YYYY-MM-DD");
|
|
},
|
|
set(value) {
|
|
this.date = this.$dayjs(value + " " + this.timeOnly)
|
|
.subtract(this.locale.timeZoneOffset, "hour")
|
|
.toISOString();
|
|
}
|
|
},
|
|
timeOnly: {
|
|
get() {
|
|
return this.$dayjs(this.value)
|
|
.add(this.locale.timeZoneOffset, "hour")
|
|
.format("HH:mm:ss");
|
|
},
|
|
set(value) {
|
|
this.date = this.$dayjs(this.dateOnly + " " + value)
|
|
.subtract(this.locale.timeZoneOffset, "hour")
|
|
.toISOString();
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</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>--> |