AngularJs Bootstrap Datepicker Validation

Question

I am using the Bootstrap Datepicker (found here: http://mgcrea.github.io/angular-strap/#/datepicker) on an input field. By default, the datepicker allows a date to be entered. If it is valid, then it sets the date. Otherwise, it sets the date to the current date.

I wrote a directive that uses a regex to only characters for a date to be input.:

maskModelCtrl.$parsers.push(function(inputValue) {
    var val = maskRenderLogic(inputValue, mask, maxVal);

    setAndRender(maskModelCtrl, val);
    return maskReturnLogic(val);
});

And I wrote a directive to standardize the input field for the datepicker with a template:

angular.module('form.validation').directive('dateMask', ['$parse', function($parse) {
    return {
        restrict: 'E',
        scope: {
            date: '='
        },
        template: '<input ng-model="date" regex-mask="[^0-9 /]" max-length="10" bs-datepicker data-date-format="mm/dd/yyyy" placeholder="mm/dd/yyyy" >',
        replace: true
    };
}]);

The problem is, the datepicker translates any keyboard input or date selections to the current date. (See plnkr: http://plnkr.co/edit/oCZnq0UOmaxC83Rv7YSs?p=preview) I don't think that these directives should be incompatible with each other.

Answer 1

I realize you've probably already considered this, but I'm writing an application that deals a lot with dates (inputs, modifications, etc) and I tested a lot of different date pickers.

The Angular-UI Bootstrap datepicker seems to be the most malleable and usable.

That being said, your directive should leverage $formatters and $parsers:

Markup:

<input date-validator type="text" ng-model="date"/>

Directive

app.directive('dateValidator', function() {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, elem, attrs, ctrl) {

            var validate = function(value) {
                //.. do validation logic ../
                modifiedValue = value / 2;

                // set the validity if needed                    
                ctrl.$setValidity('customDate', false);

                //return the modified value
                return modifiedValue;
            }

            // formatters fire when the model directly changes
            ctrl.$formatters.unshift(function(value) {
                return validate(value);
            });

            // parsers fire when the model changes via input 
            ctrl.$parser.unshift(function(value) {
                return validate(value);
            });


        }
    }
});