如何禁用Vue3 Datepicker开启Typeable后的自动补全与尾随零填充行为？

我之前在使用这个日期选择器时也碰到过一模一样的困扰——开启typeable后组件自动补全日期或者添加尾随零，完全打乱了想要的手动输入体验。这里有几个经过验证的解决方案，你可以根据需求选择：

1. 自定义输入解析逻辑（最推荐） #

这个组件提供了parseInput属性，允许你完全接管输入内容的解析过程，彻底控制是否补零或自动补全。你可以编写一个严格匹配用户输入的解析函数，只在输入完整时才转换为有效日期，否则保持原输入：

<template>
  <datepicker 
    v-model="picked" 
    :typeable="true" 
    inputFormat="MM/dd/yyyy"
    :parseInput="customParseInput"
  />
</template>

<script setup>
import { ref } from 'vue';
const picked = ref(null);

const customParseInput = (value) => {
  // 只在输入符合MM/dd/yyyy格式时才解析，否则返回原字符串（阻止自动补全）
  const dateRegex = /^\d{1,2}\/\d{1,2}\/\d{4}$/;
  if (!dateRegex.test(value)) {
    return value; // 保持用户输入原样，不做自动补全
  }
  // 当输入完整时，再转换为Date对象
  const [month, day, year] = value.split('/');
  return new Date(year, month - 1, day);
};
</script>

这个方法的优势是完全可控，你可以根据自己的需求调整解析规则——比如允许部分输入（只输入月份和日期时不自动补全年份）。

2. 禁用浏览器/组件的自动补全 #

有时候自动补全可能是浏览器的默认行为，或者组件内置的逻辑。你可以尝试给组件的输入框添加autocomplete="off"属性，同时利用组件的noAutoComplete prop：

<template>
  <datepicker 
    v-model="picked" 
    :typeable="true" 
    inputFormat="MM/dd/yyyy"
    autocomplete="off"
    :noAutoComplete="true"
  />
</template>

注意：不同浏览器对autocomplete="off"的支持可能有差异，这个方法不一定能完全解决尾随零的问题，但可以作为辅助手段。

3. 监听输入事件手动修正值 #

如果上面的方法都不生效，你可以直接监听输入框的input事件，手动覆盖组件的自动补全行为：

<template>
  <datepicker 
    ref="datePickerRef"
    v-model="picked" 
    :typeable="true" 
    inputFormat="MM/dd/yyyy"
    @input="handleInput"
  />
</template>

<script setup>
import { ref } from 'vue';
const picked = ref(null);
const datePickerRef = ref(null);

const handleInput = (value) => {
  // 获取输入框元素，手动设置值为用户输入的原始内容
  const inputElement = datePickerRef.value.$el.querySelector('input');
  if (inputElement && inputElement.value !== value) {
    inputElement.value = value;
  }
};
</script>

这个方法比较直接，但依赖组件的DOM结构，可能会随着组件版本更新而失效，所以优先推荐第一种方法。

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