Vue3中如何将多种日期输入格式转换为DD.MM.YYYY格式？

你可以通过调整字符串处理逻辑，先统一提取纯数字内容，再根据数字长度适配不同输入格式，最终生成目标格式。修改后的监听器代码如下：

const dateString = ref('');

watch(dateString, (value) => {
  // 第一步：移除所有非数字字符，只保留纯数字串
  let digits = value.replace(/[^0-9]/g, '');
  
  // 第二步：处理6位数字的情况（DDMMYY → DDMM19YY）
  if (digits.length === 6) {
    digits = digits.slice(0, 4) + '19' + digits.slice(4);
  }
  
  // 第三步：按规则添加分隔符，限制最终长度为10字符（对应DD.MM.YYYY）
  dateString.value = digits
    .replace(/^(\d{2})(\d{2})(\d{4})/, '$1.$2.$3')
    .substring(0, 10);
});

逻辑说明： #

• 纯数字统一处理：先过滤掉输入中的所有非数字字符，不管用户输入带不带.分隔符，都转为纯数字串进行后续操作。
• 6位数字适配：如果用户输入的是6位数字（如120356），自动在年份部分前补19，将其转换为8位数字串12031956，再进行格式拆分。
• 目标格式生成：对8位数字串按日.月.年的规则拆分添加分隔符，同时用substring(0,10)确保最终结果不会超出目标格式的长度。

这样就能同时支持你提到的三种输入格式：

• 12031956 → 提取8位数字后直接拆分 → 12.03.1956
• 120356 → 转换为8位数字串后拆分 → 12.03.1956
• 12.03.1956 → 提取纯数字后拆分 → 12.03.1956

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