AngularJS: Creating a directive for converting a string to a Date on the fly - angular-ui-bootstrap

Question

Angular UI Bootstrap changed the way of what the datepicker expects as ng-model in some version after 1.13.0. Before it was fine to give it an ISO date string, now it wants a Date object.
I consume ISO date strings from my API though, so I have to
convert them into Date objects before giving it to the datepicker and
convert them back to an ISO date string when storing it.
In the past I used a directive like this:
function DateObjectDirective() {
const directive = {
restrict: "A",
require: ["ngModel"],
link(scope, element, attributes, controllers) {
const ngModel = controllers[0];
ngModel.$formatters.unshift(value => {
let output = null;
if(value) {
output = moment(value).toDate();
}
return output;
});
ngModel.$parsers.unshift(value => {
let output = null;
if(value) {
output = moment(value).format();
}
return output;
});
},
};
return directive;
}
This no longer works though, as the following error is reported:
this.activeDate.getFullYear is not a function
My guess is that the datepicker still uses the string as reference. Is there any other way I can convert before giving my data to the datepicker?

Answer 1

I found out that the directive I posted does indeed still work. The only problem was the order in which AngularJS evaluated the directives.
For example:
<input ng-model="someDateString" uib-datepicker-popup="yyyy-MM-dd" woo-date-object>
In my case, woo-date-object was always evaluated before uib-datepicker-popup. The result was that the datepicker has always pushed its own formatter on top of ngModel.$formatters, thus eliminating the possibility for me to intervene.
The solution is to give the own directive a higher priority. UI's datepicker doesn't have one set, so anything above 0 (which is the default) works:
{
restrict: "A",
require: "ngModel",
priority: 9999,
link(scope, element, attributes, ngModel) {
ngModel.$formatters.push(value => {
let output = new Date();
if(value) { output = moment(value).toDate(); }
return output;
});
ngModel.$parsers.push(value => {
let output = null;
if(value) { output = moment(value).format(); }
return output;
});
},
}