Angular和Datepicker作爲指令

我想爲datepicker做一個指令，因爲我在窗體上有多個日期輸入字段，所以想要重用代碼。我嘗試了很多我在網上看過的版本，但是有麻煩。我想要的是，當用戶在一個字段中標籤/點擊時，他們會看到一個日曆，他們可以選擇一個日期。Angular和Datepicker作爲指令

以下是我正在嘗試的最新版本。

我的指令：

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

我對一個領域的HTML：

<input type='text' data-ng-model='programDetails.requestDate' data-ng-date=''>

這個會發生什麼事是我得到一個錯誤說：

TypeError: element.datepicker is not a function

任何想法，以什麼我失蹤了？我已經嘗試了很多，並且給了我一個非常相似的錯誤。我的目標是爲4個其他日期字段添加4個HTML行。

編輯： 我最終得到的Bootstrap datepicker工作....但...我有四個不同的日期在屏幕上。問題是當人打開時，他們都打開了......我需要一次打開。我猜我不知何故需要以某種方式將每個日期的打開/關閉。

下面是日期字段（每個看起來是一樣的，只是不同的NG-型號）的一個新的HTML：

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

如何打開綁到每一個特定的日期字段？

來源

2015-10-09 user3861284