How use ngMask in md-datepicker

Question

I am trying to use ngMask with material datepicker and is not working.

Anyone, has any idea how to put it to work together ?

Some ngMask examples: http://candreoliveira.github.io/bower_components/angular-mask/examples/index.html#/

Answer 1

How about something like this:

(function () {

    'use strict';

    /**
     * Setup a custom date formatter, I'm using moment for example
     */
    angular
        .module('awesomemodule')
        .constant('DEFAULT_DATE_FORMAT', 'DD/MM/YYYY')
        .config(['DEFAULT_DATE_FORMAT', '$mdDateLocaleProvider', dateConfig]);

    function dateConfig (DEFAULT_DATE_FORMAT, $mdDateLocaleProvider) {

        $mdDateLocaleProvider.formatDate = osDateFormatter;

        function osDateFormatter(date) {
            if (!date) {
                date = new Date();
            }

            return moment(date).format(DEFAULT_DATE_FORMAT);
        }
    }

})()


(function () {
    'use strict';

    /**
     * Decorate the mdDatepickerDirective to add ngMask
     */
    angular
        .module('awesomemodule')
        .config(['$provide', checkForNgMask]);

    function checkForNgMask ($provide) {

        $provide.decorator('mdDatepickerDirective', function ($delegate) {
        var directive = $delegate[0];

        var template = directive.template;

        directive.template = function (tElement, tAttrs) {
            var originalTemplate = template.apply(this, arguments);

            if (R.has('osMask', tAttrs)) {
                var element = angular.element(originalTemplate);
                element.find('input').attr('mask', tAttrs.osMask);
                element.find('input').attr('ng-model', "ctrl.dateInput");//ng-model is required by ngMask
                return R.map(R.prop('outerHTML'), R.values(element)).join("");
            }

            return originalTemplate;
        };

        return $delegate;
    });

    }
})();

And use the directive like this

<md-datepicker ng-model="myAwesomeModel" os-mask="3?9/19/9999"></md-datepicker>