Vuetify：使用开始时间 + 结束时间输入

Question

我似乎无法发现我在这里遗漏了什么。

我有 2 个输入时间，startTime 和 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>

结束时间

<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() {
        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
        }
    },

每次，我都点击...我的结束时间重置回默认值。

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

Answer 1

不知道是不是出错了，startTime和endTime的代码是一样的，现在假设你把代码分享的很好，我做了如下操作：我将所有代码复制到 codesandbox 中，它在选择时间时给我一个错误，但是如果我让 startTime 代码完美运行，那么错误可能是您正在使用 startTime 中的数据作为 endTime。

解决方案是为 startTime 和 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>

您可以在此处访问该项目。 https://codesandbox.io/s/vuetify-menu-problem-r2xvl?file=/src/App.vue

如果您想查看错误，请在开始时间代码下方添加结束时间代码

Answer 2

您的问题是两个菜单的引用名称相同 <v-menu ref="menu"。只需将 ref <v-menu ref="menu2" v-model="endTimeMenu" ... /> 从 menu 重命名为 menu2 并更改 @click:minute="$refs.menu2.save(form.values.startTime)"。工作正常 codesandbox

Vuetify：使用开始时间 + 结束时间输入

Vuetify : Working with Start Time + End Time Inputs

javascript

input

vue.js

vue-component

vuetify.js