如何实现v-date-picker同时支持键盘输入与选择器选日期？

你的核心问题在于手动输入的日期格式没有正确转换为组件内部使用的YYYY-MM-DD格式，也没有同步到父组件的value中。当前valorDateFormatted的setter仅返回格式化后的值，没有完成格式转换和值的同步，导致手动输入后组件状态不更新。

修复步骤及代码调整 #

1. 添加日期解析方法，将用户输入的DD/MM/YYYY格式转换为YYYY-MM-DD
2. 修正valorDateFormatted的setter逻辑，完成格式转换后同步到父组件
3. 可选：添加基础的日期合法性校验，避免无效输入

修改后的完整组件代码：

<template>
    <v-flex>
        <strong>{{ label }}</strong>
        <v-menu
            ref="dateMenu"
            v-model="dateMenu"
            :close-on-content-click="false"
            :nudge-right="40"
            transition="scale-transition"
            offset-y
            max-width="290px"
            min-width="290px"
        >
            <template v-slot:activator="{ on }">
                <v-text-field
                    v-model="valorDateFormatted"
                    persistent-hint
                    append-outer-icon="event"
                    clearable
                    solo
                    v-on="on"
                    :error-messages="errorMessages"
                    @click:clear="limpiarDate()"
                    @blur="handleInputBlur"
                ></v-text-field>
            </template>
            <v-date-picker
                locale="es-ES"
                v-on="$listeners"
                v-model="currentValue"
                no-title
                first-day-of-week="1"
                @input="dateChanged()"
                :min="min"
                :max="max"
                :disabled="desactivar"
            ></v-date-picker>
        </v-menu>
    </v-flex>
</template>

<script>
export default {
    inheritAttrs: false,
    data: () => ({
        dateMenu: false,
    }),
    props: {
        errorMessages:  { type: Array, default: null},
        label:          { type: String, default: ''},
        value:          { default: ''},
        min: { type: String, default: null },
        max: { type: String, default: null },
        desactivar: { type: Boolean, default: false}
    },
    computed: {
        valorDateFormatted: {
            get () {
                return this.formatDate(this.value);
            },
            set(inputValue) {
                // 将输入的DD/MM/YYYY转换为YYYY-MM-DD
                const parsedDate = this.parseDate(inputValue);
                if (parsedDate) {
                    this.$emit('input', parsedDate);
                }
            }
        },
        currentValue: {
            get() {
                if (this.value) {
                    return this.value.split(' ')[0];
                }
                return this.value;
            },
            set(val) {
                this.$emit('input', val);
            }
        }
    },
    methods: {
        dateChanged() {
            this.dateMenu = false;
        },
        formatDate(date) {
            if (!date) return null;
            const [year, month, day] = date.split(' ')[0].split('-');
            return `${day}/${month}/${year}`;
        },
        parseDate(input) {
            if (!input) return null;
            // 匹配DD/MM/YYYY格式
            const match = input.match(/^(\d{2})\/(\d{2})\/(\d{4})$/);
            if (!match) return null;
            
            const [, day, month, year] = match;
            // 简单校验日期合法性
            const date = new Date(year, month - 1, day);
            if (date.getDate() !== Number(day) || date.getMonth() + 1 !== Number(month)) {
                return null;
            }
            return `${year}-${month}-${day}`;
        },
        limpiarDate(){
            this.$emit('input', null);
        },
        handleInputBlur() {
            // 输入后自动关闭菜单（可选）
            this.dateMenu = false;
            // 同步格式化显示
            this.$forceUpdate();
        }
    }
}
</script>

<style scoped>
.theme--light.v-input >>> input, .theme--light.v-input >>> textarea{
    margin-top: 10px;
}
</style>

关键修改点说明 #

• valorDateFormatted的setter：不再返回格式化值，而是调用parseDate将用户输入的DD/MM/YYYY转换为组件要求的YYYY-MM-DD格式，通过$emit('input')同步到父组件。
• 新增parseDate方法：负责格式匹配和基础合法性校验，避免无效日期进入组件状态。
• handleInputBlur方法：处理输入框失焦事件，自动关闭菜单并强制更新组件，确保显示值与内部状态一致。
• 移除冗余的useSelectedData事件监听：原代码中该方法未定义，属于无效监听。

这样修改后，组件既支持点击选择日期，也允许用户手动输入符合DD/MM/YYYY格式的日期，输入后会自动转换为标准格式并同步到父组件。

内容的提问来源于stack exchange，提问作者scorpions78