I am encountering some difficulty in identifying what I may have missed.
I am dealing with 2 inputs: time, startTime, and endTime
startTime
<v-col cols="12" sm="6" md="2">
<v-menu
ref="menu"
v-model="startTimeMenu"
:close-on-content-click="false"
:nudge-right="40"
:return-value.sync="form.values.startTime"
transition="scale-transition"
offset-y
max-width="290px"
min-width="290px"
>
<template v-slot:activator="{ on, attrs }">
<v-text-field
dense
v-model="form.values.startTime"
label="Start Time"
append-icon="mdi-clock-time-four-outline"
readonly
v-bind="attrs"
v-on="on"
outlined
></v-text-field>
</template>
<v-time-picker
v-if="startTimeMenu"
v-model="form.values.startTime"
full-width
@click:minute="$refs.menu.save(form.values.startTime)"
></v-time-picker>
</v-menu>
</v-col>
endTime
<v-col cols="12" sm="6" md="2">
<v-menu
ref="menu"
v-model="startTimeMenu"
:close-on-content-click="false"
:nudge-right="40"
:return-value.sync="form.values.startTime"
transition="scale-transition"
offset-y
max-width="290px"
min-width="290px"
>
<template v-slot:activator="{ on, attrs }">
<v-text-field
dense
v-model="form.values.startTime"
label="Start Time"
append-icon="mdi-clock-time-four-outline"
readonly
v-bind="attrs"
v-on="on"
outlined
></v-text-field>
</template>
<v-time-picker
v-if="startTimeMenu"
v-model="form.values.startTime"
full-width
@click:minute="$refs.menu.save(form.values.startTime)"
></v-time-picker>
</v-menu>
</v-col>
data()
data() {
return {
form: {
errors: {},
values: {
name: null,
type: 'Marketing',
timezone: 'America/New_York',
startDate: new Date(Date.now() - new Date().getTimezoneOffset() * 60000).toISOString().substr(0, 10),
endDate: new Date(Date.now() - new Date().getTimezoneOffset() * 60000).toISOString().substr(0, 10),
startTime: moment().format('HH:mm'),
endTime: '24:00'
}
},
e1: 1,
valid: false,
valid2: false,
types: ['Product', 'Marketing'],
timezones: moment.tz.names(),
startDateMenu: false,
endDateMenu: false,
startTimeMenu: false,
endTimeMenu: false
}
},
Each time I click outside... my endTime keeps reverting back to the default value.
Note: I have observed that only one picker will work at a time, regardless of whether it is start or end time. Whichever one I select last, it continues to reset to the default value. I suspect there might be a conflict occurring somewhere...