为什么jQuery的Ui日期选择器没有显示在角？

Question

我尝试使用此链接显示在角jQuery UI的日期选择器 https://jqueryui.com/datepicker/ 我做这样的

function datePickerDirective() { 

    var directive = { 
    restrict: 'E', 
    scope: { 
     date: '=', 
     placeHolder: '@', 
     isRequired: '=', 
     name: '@' 
    }, 
    template: '<input ng-model="date" placeholder="{{placeHolder}}" type="text" />', 
    link: function($scope, iElem, iAttr) { 

     $(iElem).datepicker({ 
     maxDate: "+3m +2w", 
     minDate: new Date(), 
     onSelect: function(date) { 
      $scope.$apply(function() { 
      $scope.date = date; 
      }); 
     } 
     }); 
    } 
    }; 

    return directive; 
} 

但它没有显示日期选择器

这里是我的代码 https://plnkr.co/edit/kW6eGmuPFxFvzZfKGZXv?p=preview

Answer 1

$(iElem)将参考<date-picker> html元素，而不是您在模板中的实际input元素。因此，要么，选择<date-picker>元素中的输入，或者使用replace:true在你的指令定义

$('input',$(iElem)).datepicker(..)

OR

scope: { 
       date: '=', 
       placeHolder: '@', 
       isRequired: '=', 
       replace:true, 
       name: '@' 
      }, 

继承人工作fork

Answer 2

混合使用jQuery和Angular是一个糟糕的主意。改为使用AngularUI datepicker：https://github.com/angular-ui/ui-date。