angular ui - Masking in AngularJS -

is possible create mask in angularjs looks this

02years 07months.

and when user clicks on text box should change following text

0207

thanks ton!

you can use directive bind focus , blur events. http://plnkr.co/sfyfystslqpztlugbmwh

<input type="text" year-month data="foo.bar"></input>    app.directive('yearmonth', function() {     return {         restrict: 'a',         scope: {           data: '='         },         link: function(scope, element, attr) {           var re = /(\d{2})(\d{1,2})()/;            function addmask(text) {             return text.replace(re, "$1years$2months");           }            function removemask(text) {             return text.replace(re, "$1$2");           }            element.val(addmask(scope.data));            element.bind('blur', function () {             scope.$apply(function() {               var text = element.val();                scope.data = text;               element.val(addmask(text));             });           });            element.bind('focus', function () {             scope.$apply(function() {               element.val(removemask(scope.data));             });           });         }     }; }); 

but, sure read question: how two-way filtering in angular.js? there preferable solution users parsers , formatters of ngmodelcontroller.