Vuetify中选择开始日期后如何自动设置对应结束日期

核心逻辑 #

监听开始日期的绑定值变化，触发变化时自动给结束日期赋值为当前选中的开始日期即可，不需要改动原有模板的核心结构，你之前给结束日期配置的:min="form.startDate"限制可以直接保留，保证后续用户手动调整结束日期时无法选择早于开始日期的选项。

具体代码修改 #

• 调整data里的表单初始化逻辑，避免响应式属性缺失问题

data() {
    return {
        defaultFormData: {
            userId: null,
            startDate: '',
            endDate: ''
        },
        // 初始化时直接声明所有表单字段，保证Vue响应式正常生效
        form: {
            userId: null,
            startDate: '',
            endDate: ''
        },
        // 原有的allowedDates、校验规则等配置可保留不动
    };
},

• 添加watch监听器，监听开始日期变化

watch: {
    'form.startDate'(newSelectedDate) {
        if (!newSelectedDate) return
        // 基础逻辑：只要选了开始日期，就把结束日期同步成该值
        this.form.endDate = newSelectedDate

        // 如果你不希望覆盖用户之前手动选过的、合法的（晚于等于新开始日期）结束日期，可以把上面一行替换成下面的判断逻辑
        // if (!this.form.endDate || this.form.endDate < newSelectedDate) {
        //     this.form.endDate = newSelectedDate
        // }
    }
},

模板说明 #

你原来的日期选择器模板代码不需要做任何修改，直接保留即可：

<v-row>
    <v-col cols="12" sm="6" md="4">
        <v-text-field
            v-model="form.startDate"
            label="Start Date"
            :rules="startDateRules"
            readonly
        />
        <v-date-picker
            v-model="form.startDate"
            :allowed-dates="allowedDates"
            :first-day-of-week="1"
            label="Start Date"
        />
    </v-col>

    <v-spacer />

    <v-col cols="12" sm="6" md="4">
        <v-text-field
            v-model="form.endDate"
            label="End Date"
            :rules="endDateRules"
            readonly
        />
        <v-date-picker
            v-model="form.endDate"
            :min="form.startDate"
            :allowed-dates="allowedDates"
            :first-day-of-week="1"
            label="End Date"
        />
    </v-col>
</v-row>

你可以根据自己的业务需求选择是否保留对已选结束日期的判断逻辑：如果要求每次修改开始日期都强制重置结束日期和开始日期一致，就用基础赋值逻辑；如果希望保留用户之前选的合法结束日期，就用带判断的逻辑即可。

内容的提问来源于stack exchange，提问作者Daniel Kołban