用计算来分割日期？

Question

我已经简化了我的示例，但它仍然不起作用......

所以，我有一个完整日期的模型（2000-01-01）

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"/>

当获取

day

时，它可以工作，从完整日期中获取值，问题发生在设置器上。我可以输入一个非常大的数字，并且前导零将始终存在。

如何确保日期只能输入2位数字，如果是9或以下，则添加前导零？

Answer 1

您的问题的简单答案是简单地使用

slice(-2)

始终获取

day

字符串的最后两位数字。

---

更彻底的答案需要回答如何处理无效值，或者如何处理会创建无效值的输入。本质上，您需要验证输入是否符合您的要求，如果不符合您的要求，则将其转换为有效值或向用户提供输入值无效的验证错误/警告。

这意味着您需要处理几种不同的场景。假设每个插入符号位于输入的末尾并且选择为空：

• 当前输入值为

  01

  ，用户按下

  1

  • 您当前获得

    011

    。您想要做的是获取最后两位数字，因此只需对该值调用

    slice(-2)

    即可。
• 当前输入值为

  11

  ，用户按下

  3

  。你做什么工作？
  • 将值设置为

    3

    ，因为

    113

    无效？
  • 将值设置为

    13

    推出第一个

    1

    ？
  • 留下无效数字并用警告标记该字段（可能仅在焦点离开该字段时）？
• 当前输入值为

  9

  ，用户按下

  0

  。你做什么工作？
  • 将值设置为

    90

    ？
  • 将值设置为

    0

    ？
  • 将其设置为最接近的有效数字（月底，即 28/29/30/31）？
  • 将其设置为最小的有效数字（即 1）？
  • 计算更改并将月份和年份字段更新为新日期？ （例如 2000-01-01 + 89 天就是 2000-03-30）

实施取决于您想要创建的用户体验。