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-05 23:23:44 +00:00
parent 8fcc3b4194
commit 14bbada15f
5 changed files with 100 additions and 246 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,119 +1,108 @@
<template>
<div>
<!-- <v-menu
ref="menu"
v-model="show"
:close-on-content-click="false"
:nudge-right="40"
:return-value.sync="time"
lazy
transition="scale-transition"
offset-y
full-width
max-width="290px"
min-width="290px"
>
<template v-slot:activator="{ on }">
<v-text-field
v-model="value"
prepend-inner-icon="fa-calendar-alt"
@click:prepend-inner="sproing('DATE')"
append-icon="fa-clock"
@click:append="sproing('TIME')"
readonly
v-on="on"
></v-text-field>
-->
<v-menu
ref="menu"
v-model="show"
:close-on-content-click="false"
:nudge-right="40"
lazy
transition="scale-transition"
offset-y
full-width
min-width="290px"
>
<gz-date-picker v-if="show.datePicker" v-bind:value="value" scrollable>
<div>WHAAA???</div>
<v-spacer></v-spacer>
<v-btn flat color="primary" @click="show.datePicker = false">Cancel</v-btn>
<v-btn flat color="primary" @click="dateSelected(date)">OK</v-btn>
</gz-date-picker>
<gz-time-picker v-if="show.timePicker" v-bind:value="value" scrollable>
<v-spacer></v-spacer>
<div>WHOOOO???</div>
<v-btn flat color="primary" @click="show.timePicker = false">Cancel</v-btn>
<v-btn flat color="primary" @click="alert('bam!')">OK</v-btn>
</gz-time-picker>
<v-text-field
v-model="value"
prepend-inner-icon="fa-calendar-alt"
@click:prepend-inner="sproing('DATE')"
append-icon="fa-clock"
@click:append="sproing('TIME')"
readonly
></v-text-field>
</v-menu>
<!-- <v-time-picker
v-if="show.timePicker"
v-bind:value="value"
v-on:input="$emit('input', $event.target.value)"
></v-time-picker>
-->
<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="fa-calendar-alt"
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="fa-clock"
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="fa-calendar-alt"
disabled
></v-text-field>
</div>
</template>
<script>
/* eslint-disable */
/*
TODO:
Add the date picker
Make the buttons open the correct picker
Make it actually work with the binding and the selections and etc
maybe can make it editable by keyboard in the text field and still keep the pickers as a separate option?
*/
//https://stackoverflow.com/questions/54575541/vuetify-timepicker-return-value-to-model
</template> <script>
export default {
props: {
value: String,
formatDate: Function
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;
}
},
data() {
return {
show: {
timePicker: false,
datePicker: false
computed: {
formatDateTime() {
return this.value.toString();
// 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() {
return this.value.toString();
// let momentObj = this.$moment.utc();
// if (this.value) {
// momentObj = this.$moment.utc(this.value);
// }
// return momentObj.local().format("dddd MM/DD/YYYY");
},
dateOnly: {
get() {
return this.value ? this.value.substr(0, 10) : null;
// let momentObj = this.$moment.utc();
// if (this.value) {
// momentObj = this.$moment.utc(this.value);
// }
// return momentObj.local().format("YYYY-MM-DD");
},
time: null,
menu2: false,
modal2: false
};
},
mounted() {},
methods: {
sproing: function(sproingUp) {
if (sproingUp == "DATE") {
this.show.datePicker = true;
this.show.timePicker = false;
} else {
this.show.datePicker = false;
this.show.timePicker = true;
set(value) {
this.date = value + " " + this.timeOnly;
}
//debugger;
//console.log(this.show);
},
timeSelected(theTime) {
console.log("time selected: " + theTime);
timeOnly: {
get() {
return this.value ? this.value.substr(11, 8) : null;
// 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;
}
},
dateSelected(theDate) {
console.log("date selected: " + theDate);
formatTime() {
return this.value ? this.value.substr(11, 8) : null;
// let momentObj = this.$moment.utc();
// if (this.value) {
// momentObj = this.$moment.utc(this.value);
// }
// return momentObj.local().format("h:mm a");
}
}
};
</script>
<style>
</style>