Vuetify : Working with Start Time + End Time Inputs

user_4480164 0
Viewed 426

I can't seem to spot what I missed here.

I have 2 inputs time, startTime & 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
        }
    },

Every time, I clicked out ... my endTime reset back to the default value.

Note: I started to notice that only one picker will work... doesn't matter start/end time. only one seems to work when I select the minute. Whichever one I do last, It kept resetting to the default value. I think the conflict is happening somewhere...

enter image description here

vue-component vuetify.js vue.js input javascript
2 Answers

Your problem is the same ref names of two menus <v-menu ref="menu". Just rename ref <v-menu ref="menu2" v-model="endTimeMenu" ... /> from menu to menu2 and also change @click:minute="$refs.menu2.save(form.values.startTime)". Working correct codesandbox

user_92948370

I don't know if it was an error, but the code for startTime and endTime is the same, now assuming you shared the code well, I did the following: I copied all the code into codesandbox it gives me an error when selecting the time, but if I let the startTime code work perfectly then the error may be that you are using data from startTime for the endTime.

The solution is to use different variables for startTime and endTime.

startTime is Working

<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>

you can visit the project here. https://codesandbox.io/s/vuetify-menu-problem-r2xvl?file=/src/App.vue

if you want to see the error add the endTime code below the startTime code

user_173964330
Related