Vue3+TypeScript中如何设置<input type="date">为dd/mm/yyyy格式？

首先明确核心限制：原生<input type="date">的显示格式由浏览器/操作系统的区域设置决定，且它的value只能接收/返回YYYY-MM-DD格式的ISO字符串，无法通过formatter或直接修改格式字符串来强制改变显示样式。你之前尝试的watch监听格式化、绑定formatter属性无效，就是因为这个原生限制。

下面提供两种无需额外依赖的原生解决方案：

方案1：利用浏览器区域设置自动适配格式 #

如果用户的浏览器/系统支持，通过设置页面或input元素的区域属性，让浏览器自动以dd/mm/yyyy格式显示日期选择器。

实现代码 #

<template>
  <!-- 给input设置lang属性为en-GB，强制使用英式日期格式 -->
  <input 
    type="date" 
    lang="en-GB"
    v-model="selectedDate"
  >
</template>

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

// selectedDate始终是YYYY-MM-DD格式的字符串
const selectedDate = ref<string>('');
</script>

说明：这种方式的显示效果依赖浏览器对区域设置的支持，大部分现代浏览器会根据lang="en-GB"自动切换为日/月/年的显示格式，同时保留原生日期选择器的交互功能。

方案2：自定义包装组件（强制显示dd/mm/yyyy） #

如果需要完全控制显示格式，不受系统区域影响，可以封装一个组件：用普通文本框显示格式化后的日期，同时隐藏原生<input type="date">来触发日期选择器，实现格式控制和原生交互的兼顾。

实现代码 #

<template>
  <div class="custom-date-input">
    <!-- 显示格式化后的日期的文本框 -->
    <input
      type="text"
      :value="formattedDate"
      readonly
      @click="triggerDatePicker"
      placeholder="dd/mm/yyyy"
    >
    <!-- 隐藏的原生date input，负责处理日期选择逻辑 -->
    <input
      ref="dateInputRef"
      type="date"
      :value="selectedDate"
      @input="handleDateChange"
      class="hidden-date-input"
    >
  </div>
</template>

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

const selectedDate = ref<string>('');
const dateInputRef = ref<HTMLInputElement | null>(null);

// 格式化日期为dd/mm/yyyy
const formattedDate = computed(() => {
  if (!selectedDate.value) return '';
  const date = new Date(selectedDate.value);
  // 使用Intl.DateTimeFormat原生API格式化
  return new Intl.DateTimeFormat('en-GB', {
    day: '2-digit',
    month: '2-digit',
    year: 'numeric'
  }).format(date);
});

// 触发原生日期选择器
const triggerDatePicker = () => {
  dateInputRef.value?.click();
};

// 处理日期选择后的同步
const handleDateChange = (e: Event) => {
  const target = e.target as HTMLInputElement;
  selectedDate.value = target.value;
};
</script>

<style scoped>
.custom-date-input {
  position: relative;
}

.hidden-date-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
</style>

说明：

• 隐藏的原生input[type="date"]负责提供日期选择的交互逻辑，它的value始终保持ISO格式，确保日期处理的正确性。
• 可见的文本框显示dd/mm/yyyy格式的日期，点击时触发原生选择器的点击事件，保留了原生交互体验。
• 使用Intl.DateTimeFormat（原生API，替代moment.js）进行日期格式化，无需额外依赖。

关键注意事项 #

• 无论哪种方案，原生input[type="date"]的value必须是YYYY-MM-DD格式的字符串，这是HTML规范强制要求的，直接传入dd/mm/yyyy格式的字符串会导致无法识别。
• 方案1的显示效果受浏览器和系统区域设置影响，方案2则完全可控，适合需要强制统一格式的场景。

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