Angular UI启动日期选择器:ng只读支持

Question

Angular UI引导日期选择器不支持ng只读属性。如果ng readonly表达式为true，则文本输入字段将变灰，并且不能修改，但会弹出日期选择器的日历，允许修改表单字段。

到目前为止，我尝试了3种方法（参见http://plnkr.co/edit/KHrbbI6W1pWG5ewSsE9r?p=preview)，两者都相当粗鲁和丑陋：

• 如果日期选择器应为只读，则禁用它中的所有日期。

  <input type="text" datepicker-popup="dd.MM.yyyy" ng-model="dt" ng-readonly="ro" date-disabled="disabled(date, mode)" />
  

  在html文件和中

  $scope.$watch('ro', function(ro) {
    $scope.dt = new Date($scope.dt); // force datepicker div refresh
  });
  $scope.disabled = function(date, mode) {
    return $scope.ro;
  };
  

  在控制器中。

• 不允许弹出日期选择器弹出div。

  <input type="text" datepicker-popup="dd.MM.yyyy" ng-model="dt" ng-readonly="ro" is-open="opened" />
  

  在html文件和中

  $scope.$watch('opened', function(v1, v2, v3) {
    if ($scope.ro && v1) {
      $timeout(function() {
        $scope.opened = false;
      });
    }
  });
  

  在控制器中。眨眼的约会对象看起来很糟糕。

• 将日期选择器的文本输入替换为另一个不附加日期选择器的只读输入字段。

  <datepicker-ro-fix datepicker-popup="dd.MM.yyyy" ng-model="dt" ng-readonly="ro" />
  

  在html文件和中

  m.directive('datepickerRoFix', function() {
    return {
      restrict: 'E',
      require: 'ngModel',
      scope: {
        ngModel: '=',
        ngReadonly: '=',
      },
      template: '<span>'
        + '<input ng-hide="ngReadonly" type="text" datepicker-popup="dd.MM.yyyy" ng-model="ngModel" />'
        + '<input ng-show="ngReadonly" type="text" readonly="true" value="{{ ngModel | date:'dd.MM.yyyy'}}" />'
        + '</span>',
    };
  });
  

  在js文件中。这似乎是迄今为止最好的解决方案，但缺点是现在有两个输入元素，而不是一个，两者都有一些硬编码属性。

第一种和第二种方法要求我在每个日期输入字段的表单控制器中添加一堆代码，第三种方法更难定制。

我是刚接触棱角分明的人，应该会错过一些东西。有没有更好的方法可以让日期选择器的输入字段真正只读？

Answer 1

ng-disabled="true"

为我工作。Angularjs:1.2.9和ui助推器：0.8.0

不幸的是，我没有足够的声誉来评论最初的答案

Answer 2

您的第三种方法非常不错，imho。

考虑到日期选择器本身显然不支持只读属性，我看不到如何使其只读的其他方法（您甚至为它创建了一个指令）

当点击输入时，你的第二种方法有时会导致轻微的闪烁（只有我吗？）

至于定制，你能详细说明一下为什么很难做到吗？我想，你必须通过管道将原始指令的所有可能属性传输到你的指令中？

Answer 3

使用ng-disabled="true"

<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="date" min="minDate" max="maxDate" ng-disabled="true" readonly="true"/>