Javascript AngularJS指令，防止输入无效日期

我想要的是让用户只键入有效日期，但是我很难找到一个好方法来实现这一点

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

尝试1

将函数绑定到keypress/keydown事件

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

尝试2

将函数绑定到keyup/changed事件

• 我获取旧值、新值并对其进行验证，如果无效，则恢复到旧值
• 这创造了一种奇怪的用户体验，因为他们看着自己输入的内容被删除和退回，我一点都不喜欢
• 如果无效，则不允许用户退格，因为它会将其还原
• 如果输入足够快，仍然允许无效数据通过

帮助

是否有任何方法可以在他们键入日期时（而不是在事实之后）验证日期，而不会发生奇怪的事情

---

Plunkr显示问题：

您可以稍微修改第一种方法。您说您正在绑定keyup/down事件，然后验证输入，因此不要截获backspace（keycode 8）的按键事件，也就是说，不要在用户按下backspace键时验证输入

---

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

在反复使用之后，我能够想出一个我满意的解决方案。我想如果有人好奇，我会分享：

Plunkr:

基本上，我偶然发现了元素的“selectionStart”和“selectionEnd”属性，它允许您获取新值在按键上插入位置的索引。因此，可以说，我能够获得“新值”，方法是获取旧值并将键入的字符插入正确的位置，对其进行验证，并防止按键无效

我做的另一件不同的事情是去掉屏蔽插入的所有斜杠和空格（u/u/u/uu/uu/uuu/uuu/uuu），并将我的正则表达式更改为仅基于数字进行验证（“例如12121900”），这允许用户在任何时候退格/插入字符，而不会出现类似于“123/19/90”的奇怪变化

---

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

改用日期选择器。最好验证日期。还可以考虑2月30日或4月31日等情景。最好使用日期选择器。防止用户手动输入日期。关注焦点，显示日期选择器I抱歉，我没有提到我也使用了日期选择器（只是没有将其放入plunkr），但我不想阻止他们也能键入日期，这就是我的问题所在。这确实解决了退格导致其无效并恢复尝试的问题#2，因此，感谢您的建议，但不幸的是，所有其他问题仍然存在。这并不坏，但允许2016年11月31日无效。