I am trying to make a directive for a datepicker because I have multiple date input fields on a form and so would like to reuse the code. I have tried many versions that I have seen all over the web but am having troubles. What I would like is that when the user tabs/clicks into a field they are presented with a calendar that they can choose a date.
Below is the latest version of what I am trying.
My directive:
var app = angular.module('myApp.directives', []);
app.directive('ngDate', function() {
return {
restrict: 'A',
require : 'ngModel',
link : function (scope, element, attrs, ctrl) {
element.datepicker({
changeYear:true,
changeMonth:true,
dateFormat:'dd/M/yy',
onSelect:function (date) {
ctrl.$setViewValue(date);
scope.$apply();
}
});
}
};
});
My HTML for one field:
<input type='text' data-ng-model='programDetails.requestDate' data-ng-date=''>
What happens with this is I get an error saying:
TypeError: element.datepicker is not a function
Any ideas as to what I am missing? I have tried quite a few and most give me an error that is very similar. My goal would be to add 4 more of the HTML lines for 4 other date fields.
EDIT: I ended up getting the Bootstrap datepicker to work....BUT...I have four of them on the screen for 4 different dates. The problem is when one opens, they all open...I need one to open at a time. I'm guessing I somehow need to tie the open/close to each date somehow.
Here is the new HTML for one of the date fields (each look the same, just different ng-models):
<span class="input-group" >
<input type="text" class="input-sm " datepicker-popup="{{format}}" ng-model="programDetails.startDate" is-open="opened" datepicker-options="dateOptions" ng-focus="open($event)" ng-click="open($event)" close-text="Close" ng-change="updateDate(programDetails.startDate)" />
<span class=" input-sm" >
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</span>
Controller:
$scope.open = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened = true;
};
How do I tie the open to each particular date field?
