AngularJs Bootstrap Datepicker Validation - angularjs

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);
});
}
}
});