jQuery-ui datepicker в директиве angularjs

Question

У меня есть таблица с полями ввода с датами. Мне нужно изменить их на datepicker. С jquery-ui он отлично работает, но мне нужно сделать это на angularjs.This, что я имею прямо сейчас, но это не работает для меня. Контроллер:

.controller('TimesheetCtrl', ['$scope', 'restService', 
    function($scope, restService) { 
     $scope.bindModel = function(data) { 
      $scope.model = data; 
     }; 
    restService.getTicketsInProgressList($scope.bindModel); 
    } 
]); 

Директива:

.directive('datepicker', function() { 
    return { 
     restrict: 'A', 
     require: 'ngModel', 
     link: function (scope, element, attrs, ngModelCtrl) { 
      $(function() { 
       element.datepicker({ 
        dateFormat: 'dd/mm/yy', 
        onSelect: function (date) { 
         scope.$apply(function() { 
          ngModelCtrl.$setViewValue(date); 
         }); 
        } 
       }); 
      }); 
     } 
    }; 
}); 

HTML:

<tbody ng-repeat="item in model | orderBy: '-TaskDate'"> 
    <tr class="timesheet-day-block"> 
     <td colspan="5"> <span class="timesheet-date">{{item.TaskDate | date: MM/dd/yyyy}}</span> 

     </td> 
    </tr> 
    <tr class="timesheet-table-rows" ng-repeat="list in item.TimesheetList"> 
     <td>{{list.ProjectName}}</td> 
     <td> 
      <!-- HERE IS THE PROBLEM --> 
      <input type="text" placeholder="dd/mm/yyyy" ng-model="list.TaskDate | date: 'dd/MM/yyyy'" datepicker/> 
     </td> 
     <td> <a ng-href="#/tickets/ticket/{{ticket.Id}}">{{list.Task}}</a> 

     </td> 
     <td> 
      <input type="text" value="{{list.TimeWorked}}" placeholder="Elapsed time" style="width: 98%" /> 
     </td> 
     <td> 
      <input type="text" value="{{list.Note}}" placeholder="Note" style="width: 98%" /> 
     </td> 
    </tr> 
</tbody> 

Answer 1

Вы можете проверить с ссылке ниже.

Fiddle

app = angular.module 'myapp', ['ng-bootstrap-datepicker'] 

AppCtrl = ($scope)-> 
    $scope.datepickerOptions = 
    format: 'yyyy-mm-dd' 
    language: 'fr' 
    autoclose: true 
    weekStart: 0 

    $scope.date = '2000-03-12' 

app.controller 'AppCtrl', AppCtrl  
angular.bootstrap document, ['myapp'] 

Answer 2

Вводят $timeout в вашей директиве и использовать его как это.

.directive('datepicker', function ($timeout) { 
    return { 
     restrict: 'A', 
     require: 'ngModel', 
     link: function (scope, element, attrs, ngModelCtrl) { 
      $timeout(function() { 
       $(function() { 
        element.datepicker({ 
         dateFormat: 'dd/mm/yy', 
         onSelect: function (date) { 
          scope.$apply(function() { 
           ngModelCtrl.$setViewValue(date); 
          }); 
         } 
        }); 
       }); 
      }); 
     }; 
    } 
});