How To Use JQuery Input Mask With Angular JS Directive To Mask Date

Why bother with complexities when there are already libraries that mask date formats, right? The JQuery Input Mask library does the trick easily.

I do not like to use HTML 5’s Date input type field because you still would have to create a function to limit the number of characters for the year. There is no attribute in this HTML element to define the max length. It just does not work.

So rather than bother with hassles, this JQuery library does the trick easily. This is how the HTML input field will look like.

And here, is the Angular JS Directive code:

If you noticed, the reason I used a bind on the keyup function is because the JQuery Input Mask library messes the backspace and delete key result if I wanted to use scope.$parsers to detect any input. Binding the keyup did the trick.

Pretty easy, right?

Related Posts Plugin for WordPress, Blogger...

Leave a Reply

Your email address will not be published. Required fields are marked *