To be honest, I’m not quite sure why it’s caused and what’s causing your date to be “toString-ed” before showing it in the input.
However, I did find places to restructure your directive, and remove much unnecessary code, such as $compile
service, attributes changes, scope inheritance, require
in the directive, etc.. I used isolated scope, since I don’t think every directive usage should know the parent scope as this might cause vicious bugs going forward. This is my changed directive:
angular.module('ui.bootstrap.demo').directive('myDatepicker', function() {
return {
restrict: 'A',
scope: {
model: "=",
format: "@",
options: "=datepickerOptions",
myid: "@"
},
templateUrl: 'datepicker-template.html',
link: function(scope, element) {
scope.popupOpen = false;
scope.openPopup = function($event) {
$event.preventDefault();
$event.stopPropagation();
scope.popupOpen = true;
};
scope.open = function($event) {
$event.preventDefault();
$event.stopPropagation();
scope.opened = true;
};
}
};
});
And your HTML usage becomes:
<div my-datepicker model="container.two"
datepicker-options="dateOptions"
format="{{format}}"
myid="myDP">
</div>
Edit: Added the id
as a parameter to the directive. Plunker has been updated.
Plunker