为什么 jquery Ui 日期选择器没有显示在 angular 中？

Question

我正在尝试使用此 link 在 angular 中显示 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

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

Answer 2

$(iElem) 将引用 <date-picker> html 元素，而不是模板中实际的 input 元素。因此，select 那个 <date-picker> 元素内的输入，或者在你的指令定义中使用 replace:true

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

或

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

这是一个有效的 fork

为什么 jquery Ui 日期选择器没有显示在 angular 中？

why jquery Ui date picker not showing in angular?

javascript

jquery

angularjs

angularjs-directive