AngularJS directive to prevent invalid date input

Question

I want the user to be able to enter only a valid date, however, it’s hard for me to figure out how to do this.

The date format should be "MM / DD / YYYY", so I have a mask on the input "99/99/9999". Although this forces the user to enter only numbers and automatically formats it as I need, the problem is that it allows the user to enter something like "53/49/6540", which is an invalid date.

Attempt 1

Associating a function with a keypress / keypress event.

• I have a regular expression that can check the date as they are entered (so it allows, for example, "12", but not "13" for the month).
• Everything looks good .. but ... starts showing some strange results when editing
  • Say the input is "10/21/1999"
  • They want to change the month to "12".
  • So they put the cursor after "0" and press backspace,
  • The value is now 12/11/999 and is invalid, preventing entry
  • Or they simply highlight "0" and accidentally hit "3" instead of "2", they will pass, becoming "13/21/1999", then they will be invalid, preventing further input

Attempt 2

Binding a function to the keyup / changed event.

• I get the old value, the new value and check it, and return to the old if it is invalid
• This creates a weird user interface as they watch what they typed, delete, and return, which I don't like at all.
• Does not allow the user to back off if it is invalid, as it returns it
• Saves invalid data if you typed fast enough

Help

Is there any way to confirm the date when they dial it (and not after the fact) without having strange things?

Plunkr shows problems: http://embed.plnkr.co/0qbiiiRnIo9SuJ5xNe30/preview

Answer 1

After playing with him more, I was able to come up with a solution that I am pleased with. I thought that I would share something that someone was curious:

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

Basically, I came across the properties "selectionStart" and "selectionEnd" of an element that allows you to capture an index at which a new value will be inserted at the click of a button. Thus, I was able to get a "new value", so to speak, taking the old value and inserting the character entered in the correct position, confirm it and we will not allow pressing the "invalid" key.

Another thing I did differently was to exclude all the slashes and spaces that the masking inserted (_ _ / _ _ / _ _ _ _) and changed my regex only for checking based on numbers (for example, " 12121900 ") which allows the user to return / insert characters at any time without getting the strange" 123/19/90 "variations of the options that fail.

It's not quite perfect, but better, at least.

Answer 2

You can change your first approach a bit. You said that you bind the keyup / down event and then check the input, so do not intercept the backspace key event (keycode 8), that is, do not check the input when the user presses the backspace key.

Now you can also add a timeout of about 3 seconds if the user does not change the input, then you can confirm your entry and inform the user about the date.