Vue3中配置Vuetify的<v-date-input>实现日期格式与数据交互

问题1：修改显示格式为YYYY-MM-DD #

你当前代码里的format属性未生效，核心原因是没配合model-value-format明确绑定值的格式，导致组件默认用了MM/DD/YYYY的解析逻辑。调整方案如下：

1. 给组件添加model-value-format属性，和format保持一致为YYYY-MM-DD，让组件明确按指定格式处理绑定值与显示值；
2. 确保绑定的变量是YYYY-MM-DD格式的字符串，或是标准Date对象。

修改后的组件代码：

<v-date-input
  v-model="selectedDate"
  color="primary"
  format="YYYY-MM-DD"
  model-value-format="YYYY-MM-DD"
/>

如果你的getDate是返回Date对象的方法，直接把结果赋值给selectedDate即可；如果是字符串，确保格式为YYYY-MM-DD。

问题2：获取选中日期 & 传入初始日期 #

• 获取选中日期：用Vue3的v-model双向绑定最直接，绑定的变量（比如selectedDate）会自动同步选中的日期值（格式由model-value-format指定）。如果不想用v-model，也可以监听update:modelValue事件：

<v-date-input
  :modelValue="selectedDate"
  @update:modelValue="handleDateChange"
  color="primary"
  format="YYYY-MM-DD"
  model-value-format="YYYY-MM-DD"
/>

对应脚本逻辑：

const handleDateChange = (newDate) => {
  selectedDate.value = newDate;
  // 这里可以写选中日期后的业务逻辑，比如提交表单
};

• 传入初始日期：直接给绑定变量赋值即可，比如在setup里初始化：

import { ref } from 'vue';
import { VDateInput } from 'vuetify/labs/VDateInput';

// 方式1：传YYYY-MM-DD格式字符串
const selectedDate = ref('2024-05-20');
// 方式2：传Date对象（组件会自动按format转换显示）
// const selectedDate = ref(new Date());

额外注意 #

如果项目未配置Vuetify日期适配器，可能出现格式解析异常，需在Vuetify配置中导入并设置适配器（以date-fns为例）：

// vuetify.js
import { createVuetify } from 'vuetify';
import { createDateFnsAdapter } from '@vuetify/date-fns-adapter';

export default createVuetify({
  date: {
    adapter: createDateFnsAdapter(),
  },
});

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