如何通过Vue computed处理日期拆分，限制日输入为两位并补前导零？

问题背景 #

现有存储完整日期（格式如2000-01-01）的model：

const model = defineModel({
    type: String,
});

拆分出日的计算属性：

const day = computed({
    get() {
        return model.value.split('-')[2];
    },
    set(newValue) {
        model.value = `${year.value}-${month.value}-${newValue.padStart(2, 0)}`;
    },
});

对应输入框：

<input v-model="day"/>

当前问题：

• 可输入任意大的数字（如999）
• 始终保留前导零（比如输入05后无法删除前导零）

修复方案 #

修改计算属性的setter，加入输入过滤、长度限制和数值范围校验，同时优化前导零的处理逻辑：

const day = computed({
    get() {
        return model.value.split('-')[2];
    },
    set(newValue) {
        // 过滤非数字字符，只保留数字
        const numStr = newValue.replace(/\D/g, '');
        // 截取前两位，限制最多输入两个数字
        const trimmed = numStr.slice(0, 2);
        // 转成数字，空值或0默认设为1
        const dayNum = parseInt(trimmed, 10) || 1;
        // 限制日的有效范围（1-31，如需精准校验可结合年月判断）
        const validDay = Math.max(1, Math.min(31, dayNum));
        // 格式化为两位数字，仅小于10时补前导零
        const formattedDay = validDay.toString().padStart(2, '0');
        // 更新完整日期
        model.value = `${year.value}-${month.value}-${formattedDay}`;
    },
});

同时优化输入框属性，提升交互体验：

<input v-model="day" inputmode="numeric" maxlength="2"/>

注：inputmode="numeric"确保移动端弹出纯数字键盘，maxlength限制输入长度（部分浏览器需配合JS逻辑兜底，因为部分场景下number类型的maxlength不生效）

关键逻辑说明 #

• 非数字过滤：通过正则/\D/g清除所有非数字字符，避免输入无效内容
• 长度截断：slice(0,2)强制保留最多两位数字，防止输入过长数值
• 范围校验：用Math.max和Math.min把日值锁定在1-31区间，避免无效日期
• 智能补零：仅当有效日值小于10时自动补前导零，输入5转为05，输入12保持原样

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