将 v-date-picker 绑定到带有格式化日期的 v-text-field

Question

我正在尝试将 v-date-picker 选项绑定到数据格式化的 v-text-field 。我已经在整个应用程序中使用了一个名为 formateDate() 的函数，并且我尝试将其应用于 v-text-field 值，并以日期选择器的 v-model 作为输入。当 v-menu 加载并加载初始值时，v-text-field 显示格式化的日期，但是一旦我在 v-date-picker 中选择一个选项，该值就会被清除，并且不会显示任何内容。也没有绘制任何错误。这是我的代码：

<v-menu v-model="ratingPeriodBeginMenu"
    :close-on-content-click="false"
    transition="scale-transition"
    offset-y
    max-width="290px"
    min-width="auto">
    
    <template v-slot:activator="{ props }">
        <v-text-field
            v-bind="props"
            label="Rating Period Begin Date"
            :value="formatDate(ratingPeriodBeginModel,'MM/DD/YYYY')?.toString()"
            prepend-inner-icon="mdi-calendar"
            variant="outlined"/>
    </template>
    
    <v-date-picker 
        v-model="ratingPeriodBeginModel"
        color="primary"
        no-title
        @input="ratingPeriodBeginMenu = false">
    </v-date-picker>
    
</v-menu>

我使用的功能如下：

export function formatDate(inputDate : Date | null, formatType : string) {
    if(inputDate == null) return null;
    
    if(formatType == 'MM/DD/YYYY'){
        const date = new Date(inputDate)
        return date.toLocaleDateString("en-US")
    }
}

Answer 1

如果您使用 Vuetify 3，请尝试将您的 v-text-field 的 :value 替换为 :model-value :

<v-menu v-model="ratingPeriodBeginMenu"
    :close-on-content-click="false"
    transition="scale-transition"
    offset-y
    max-width="290px"
    min-width="auto">
    
    <template v-slot:activator="{ props }">
        <v-text-field
            v-bind="props"
            label="Rating Period Begin Date"
            :model-value="formatDate(ratingPeriodBeginModel,'MM/DD/YYYY')?.toString()"
            prepend-inner-icon="mdi-calendar"
            variant="outlined"/>
    </template>
    
    <v-date-picker 
        v-model="ratingPeriodBeginModel"
        color="primary"
        no-title
        @input="ratingPeriodBeginMenu = false">
    </v-date-picker>
    
</v-menu>