How do I get masked date in model from input in angular using ui-mask?

Question

I have a view which requires that the user enter their birthdate into a textbox.

I am using the mask directive from UI-Utils.

My view has this input element in it:

<input ui-mask="99/99/9999" placeholder="MM/DD/YYYY" type="text" name="uBirthdate" ng-model="user.birthdate" required/>

and in my controller I have the scope set up as

myApp.controller('HomeCtrl', function ($scope, myService){

    $scope.user = registerService.getCurrentUser();

    $scope.submit = function () {
        //do something with $scope.user.birthdate
    };

    }
});

My issue is that in my controller, the birthdate property contains the value from the input WITHOUT the masking characters so an input of

11/20/1980 in the view becomes 11201980 as a property on the $scope

How can I make sure I have a valid masked date to work with in my controller? Just FYI, this date will be sent as JSON in a POST request to my server.

Answer 1

Upgrade to the lastest angular-ui and use the following syntax

ui-mask="99/99/9999" model-view-value="true"

The model-view-value will keep the mask on your model object.