为什么 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(..)

或

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

这是一个有效的fork

Answer 2

混合使用 jQuery 和 Angular 是个坏主意。请改用 AngularUI 日期选择器：https://github.com/angular-ui/ui-date。