AngularJS指令防止输入无效日期

Question

我想要的是是让用户只输入有效日期，但是我无法找到实现这一目标的好方法。

日期格式需要为“MM / DD / YYYY”，因此我在输入上有一个掩码为“99/99/9999”。虽然这会强制用户只键入数字并按照我需要的方式自动格式化，但问题是这允许用户键入类似“53/49/6540”的内容，这是一个无效的日期。

尝试1

将函数绑定到keypress / keydown事件。

• 我有一个可以在键入时验证日期的正则表达式（例如，它允许“12”而不是“13”）。
• 一切看起来都不错......但是......编辑时会开始显示一些奇怪的结果
  • 假设输入为“10/21/1999”
  • 他们想将月份更改为“12”。
  • 所以他们将光标放在“0”之后并点击退格，
  • 现在值为“12/11/999”且无效，阻止输入
  • 或者，他们只是突出显示“0”而不小心点击“3”而不是“2”，它会经过，变成“13/21/1999”然后无效，阻止进一步输入

尝试2

将函数绑定到keyup / changed事件。

• 我得到旧值，新值并验证它，如果它无效则还原为旧值
• 这会产生一种奇怪的用户体验，因为他们会看到他们输入的内容被删除和退回，我完全不喜欢
• 如果用户无效，则不会让用户退格，因为它会将其还原
• 如果键入的速度足够快，仍然会通过无效数据

帮助

在没有发生奇怪的事情的情况下，有没有办法在输入日期时（而不是在事后）验证日期？

Plunkr显示问题： http://embed.plnkr.co/0qbiiiRnIo9SuJ5xNe30/preview

Answer 1

在更多地玩弄之后，我能够提出一个我满意的解决方案。以为如果有人好奇，我会分享：

Plunkr： http://embed.plnkr.co/gE1WXaXsYI7zpWPkmvVS/preview

基本上，我偶然发现元素的“selectionStart”和“selectionEnd”属性，它允许您获取新值将在按键上插入的位置的索引。所以我可以通过获取旧值并将输入的字符插入正确位置，验证它并防止按键无效来获得“新值”。

我做的另一件事是删除掩码插入的所有斜杠和空格（_ _ / _ _ / _ _ _ _）并将我的正则表达式改为仅基于数字验证（例如“12121900”），它允许用户在任何时候退格/插入字符，而不会出现奇怪的“123/19/90”变种，这些变化会失败。

它并不完美，但至少更好。

Answer 2

您可以稍微修改您的第一种方法。你说你绑定了keyup / down事件然后验证了输入，所以不要拦截退格键（keycode 8）的键事件，即每当用户按下退格键时都不验证输入。

现在你还可以添加大约3秒的超时，如果用户没有修改输入，那么你可以验证输入并告诉用户日期。