jquery Ui dateピッカーが角度で表示されない理由

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)は、テンプレートの実際のinput要素ではなく、<date-picker> html要素を参照します。だから、どちらか、その<date-picker>要素内の入力を選択するか、相続人はあなたのディレクティブの定義に

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

OR

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

をreplace:trueを使用する作業fork

Answer 2

jQueryとAngularを混在させるのは悪い考えです。代わりにAngularUIのdatePickerを使用してください：https://github.com/angular-ui/ui-date。