如何在 vue 组件中使用 <v-date-input> 来接受日期？

Question

在 Vue 3 项目中，我尝试在 vue 组件中使用 Vuetify 并以 YYYY-MM-DD 格式显示它。

导入 VDateInput 后

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

我按以下方式使用日期选择器：

<v-date-input
  :modelValue="getDate"
  color="primary"
  format="YYYY-MM-DD"
      />

单击 时，它会打开日期选择器，但是显示的日期采用 MM/DD/YYYY 格式。

问题：

1. 如何将数据格式更改为 YYYY-MM-DD。看起来，我需要用 getDate() 做一些事情，但是怎么做呢？
2. 如何从 中获取选定的日期，如果我需要将日期传递给日期选择器，我该怎么做？

感谢您的帮助。

Answer 1

您需要添加自定义格式的脚本。该组件应该这样调用：

<v-date-input
label="Date format (YYYY/MM/DD)"
v-model="dateValue"
:value="dateValue.toISOString().substr(0, 10)"
></v-date-input>

你的脚本应该实现这样的东西：

const customFormatter = {
  date: (val) => {
    if (!val) return null;
    const date = new Date(val);
    const year = date.getFullYear();
    const month = (date.getMonth() + 1).toString().padStart(2, "0");
    const day = date.getDate().toString().padStart(2, "0");
    return `${year}/${month}/${day}`;
  },
};

可悲的是，这没有任何记录。