vue.js - 我如何在 Vue 3/Typescript 组件中使用 元素更改日期格式？

我正在尝试在 Vue 3 中使用 TypeScript 将日期格式化为 dd/mm/yyyy 格式，但格式化没有被应用。我看到许多答案推荐使用 moment.js，但该库的文档说它已经过时，而且可以使用原生的 toLocaleDateString("en-GB") 来实现。

这是我的代码：

<template>
  <div>
    <label for="date">Date:</label>
    <input type="date" id="date" v-model="selectedDate" />
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";

const selectedDate = ref("");
</script>

我尝试使用：

import { ref, computed, watch } from "vue";
// ...
watch(selectedDate, (newValue, oldValue) => {
  const newDate = new Date(newValue);
  const formattedDate = newDate.toLocaleDateString("en-GB");
  selectedDate.value = formattedDate;
});

还尝试添加：

const format = (value: string) => {
  const formatter = new Intl.DateTimeFormat("en-GB", {
    year: "numeric",
    month: "2-digit",
    day: "2-digit"
  });
  return formatter.format(new Date(value));
};
// ...
    <input type="date" id="date" :formatter="format" v-model="selectedDate" />

在这两种情况下，当我进入页面时，日期仍然显示为默认格式（月/日/年）。

我也尝试过使用这个其他问题的解决方案，但 <input type="date"> 对字符串值不能正常工作。我真的很想拥有用于选择日期的小部件。

如何以 dd/mm/yyyy 格式正确格式化日期，并处理这些小部件问题，如果可能的话，不安装其他库？

答案＃1

我几乎可以肯定，没有标准的方法可以改变日期类型 HTML <input> 渲染日期各部分顺序的方式。

引用自 MDN 关于日期输入的页面：

注意：显示的日期格式将与实际的value不同——显示的日期是根据用户浏览器的本地化格式化的，但解析后的value始终以yyyy-mm-dd格式显示。

在《如何让 <input type="date"> 在 Chrome 中以本地化格式显示日期？》中，最佳答案是:

Chrome 会按照设置 > 语言中配置的语言格式显示日期：

moment.js 已被弃用这一事实无关紧要——你使用它也无法得到你想要的东西。

如果你想控制日期输入的日期格式，你要么必须自己编写日期输入，而不是使用 <input type="date">，要么你可以分叉 Chromium 或者你使用的任何浏览器，并制作一个可配置该功能的修改版本，然后交付给你的用户。（不切实际（我知道））

提问者在评论中表示，他们发现 vuejs3-datepicker 对解决他们的问题/实现他们的目标很有帮助。