94 lines
2.3 KiB
Vue
94 lines
2.3 KiB
Vue
<template>
|
|
<v-menu
|
|
v-model="menu2"
|
|
:close-on-content-click="false"
|
|
:nudge-right="40"
|
|
lazy
|
|
transition="scale-transition"
|
|
offset-y
|
|
full-width
|
|
max-width="290px"
|
|
min-width="290px"
|
|
>
|
|
|
|
<v-text-field
|
|
slot="activator"
|
|
v-model="init_time"
|
|
:label=init_label
|
|
persistent-hint
|
|
readonly
|
|
browser-autocomplete="off"
|
|
></v-text-field>
|
|
<v-time-picker
|
|
v-if="menu2"
|
|
v-model="init_time"
|
|
full-width
|
|
@click:minute="save(init_time)"
|
|
:max="init_max_time"
|
|
format="24hr"
|
|
></v-time-picker>
|
|
|
|
</v-menu>
|
|
</template>
|
|
|
|
<script>
|
|
module.exports = {
|
|
props : ['label', 'time', 'data', 'max_time'],
|
|
|
|
data () {
|
|
return {
|
|
init_time: this.time && this.time != "00:00:00" ? this.time : null,
|
|
init_max_time: this.max_time ? this.max_time : '24:00:00',
|
|
timeFormatted: "00:00",
|
|
menu1: false,
|
|
menu2: false,
|
|
|
|
init_label: this.label ? this.label : 'Time',
|
|
init_data: this.data ? this.data : ''
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
computedTimeFormatted () {
|
|
return this.formatTime(this.init_time)
|
|
}
|
|
},
|
|
|
|
watch: {
|
|
init_time (n, o) {
|
|
this.timeFormatted = this.formatTime(this.init_time)
|
|
|
|
this.$emit('change', {"old_time":o, "new_time":n, "data":this.init_data});
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
formatTime (time) {
|
|
return time;
|
|
// if (!date) return null
|
|
|
|
// const [year, month, day] = date.split('-')
|
|
// return `${day}-${month}-${year}`
|
|
},
|
|
parseTime (time) {
|
|
// if (!date) return null
|
|
|
|
// const [month, day, year] = date.split('/')
|
|
// return `${year}-${month.padStart(2, '0')}-${day.padStart(2, '0')}`
|
|
return time;
|
|
},
|
|
|
|
emitChange (n, o) {
|
|
console.log("old:"+o)
|
|
console.log("new:"+n)
|
|
},
|
|
|
|
save (time) {
|
|
console.log("time:"+time)
|
|
this.$emit('change', {"new_time":time, "data":this.data});
|
|
this.menu2 = false;
|
|
}
|
|
}
|
|
}
|
|
</script>
|