Making AngularUI datepicker an actual directive - angularjs

Question

I'm trying to turn angular-ui's date-picker into an actual directive.
I can display it on the page with the correct model and format, but the toggling doesn't work for me (trying to name it via the attributes).
Here is my code:
My html
<date-picker data-format="dd/MM/yyyy" data-model-name="dateReviewed" data-ng-model="oneWMS.dateReviewed" data-status="statusDateReviewed" data-opened="openDateReviewed"></date-picker>
My directive
function datePicker() {
return {
restrict: 'AE',
require: 'ngModel',
scope: {
format: '#',
mod: '=ngModel',
status: '#',
opened: '#'
},
template: '<div class="input-group">' +
'<input type="text" class="form-control" datepicker-popup="{{format}}" data-ng-model="mod" is-open="status.opened" ng-required="true" close-text="Close" />' +
'<span class="input-group-btn">' +
'<button type="button" class="btn btn-default" ng-click="opened($event)"><i class="glyphicon glyphicon-calendar"></i> </button>' +
'</span>' +
'</div>',
link: function(scope, iElement, iAttrs) {
// all the directive code
console.log(iAttrs.format); // dd/MM/yyyy
console.log(iAttrs.ngModel); // oneWMS.dateReviewed
console.log(iAttrs.status); // statusDateReviewed
console.log(iAttrs.opened); // openDateReviewed
console.log(iAttrs.modelName); // dateReviewed
var modelStatusDate = iAttrs.status;
var modelOpenDate = iAttrs.opened;
var modelName = iAttrs.modelName;
scope.today = function() {
scope.modelName = new Date();
scope.dateApproved = new Date();
scope.today();
scope.clear = function () {
scope.modelName = null;
};
scope.modelOpenDate = function($event) {
scope.modelStatusDate.opened = true;
};
scope.modelStatusDate = {
opened: false
};
scope.getDayClass = function(date, mode) {
if (mode === 'day') {
var dayToCheck = new Date(date).setHours(0,0,0,0);
for (var i=0;i<scope.events.length;i++){
var currentDay = new Date(scope.events[i].date).setHours(0,0,0,0);
if (dayToCheck === currentDay) {
return scope.events[i].status;
}
}
}
return '';
};
} // link
} // return
} // picker
}
Don't know if just opening the picker doesn't work or if the date selecting will fail as well.

Answer 1

I have made a custom date directive using angularui date-picker. Have a look, it might be useful to you. Here is plunkr url . http://plnkr.co/edit/FDigEjyMYm5SVYnQyZGp.

Answer 2

If you're using Angular and Bootstrap, I would strongly encourage you to use Angular UI Bootstrap.
The other Angular UI libraries are not actively maintained.