VueDatePicker结合v-maska：解决日期掩码双击生效及输入格式化问题

架构老林

2026-6-14

解决VueDatePicker结合v-maska的日期格式化问题

问题分析

核心矛盾在于：v-maska的eager: false配置仅在输入框失焦时才应用掩码规则，而日历选择日期后输入框并未触发失焦事件，导致需要双击才能触发掩码生效；同时需要实现纯数字输入（如10102020）自动格式化为10.10.2020的需求。

解决方案

1. 调整maska配置，开启实时掩码应用

将datemask的eager属性改为true，让掩码在输入值变化时立即生效，无需等待失焦：

const datemask = reactive({
    mask: '##.##.####',
    eager: true, // 实时应用掩码规则
});

2. 修改VueDatePicker配置，避免冲突并添加事件监听

将type="date"改为type="text"，避免原生date输入类型干扰掩码逻辑；
添加@update:model-value事件监听，在日期选择后手动触发输入框的input事件，确保maska捕获到值的更新：

<VueDatePicker
    v-model="model"
    v-maska:[datemask]
    model-type="dd.MM.yyyy"
    type="text"
    format="dd.MM.yyyy"
    auto-apply
    locale="ru"
    placeholder="дд.мм.гггг"
    :enable-time-picker="false"
    :text-input="{ format: 'dd.MM.yyyy' }"
    @update:model-value="triggerMaskUpdate"
    ref="datePicker"
/>

3. 实现手动触发掩码更新的方法

通过组件的ref获取输入框元素，手动触发input事件，强制maska重新处理当前值：

const datePicker = ref(null);

const triggerMaskUpdate = () => {
    const inputEl = datePicker.value?.$el.querySelector('input');
    if (inputEl) {
        inputEl.dispatchEvent(new Event('input'));
    }
};