Question

Angular UI Bootstrap datepicker不支持ng-readonly属性。如果ng-readonly表达式为true，则文本输入字段为灰色且无法修改，但会弹出datepicker的日历，允许修改表单字段。

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

如果只读取，则禁用datepicker中的所有日期。

<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;
};

在控制器中。

不允许弹出datepicker弹出窗口。

<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的文本输入替换为另一个没有附加datepicker的只读输入字段。

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

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

我是棱角分明的新手，应该遗漏一些东西。有没有更好的方法来使用datepicker创建输入字段真正只读？

Answer 1

ng-disabled="true"

为我工作。 Angularjs：1.2.9 和 ui-boostrap：0.8.0

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

Answer 2

你的第三种方法非常好，imho。

鉴于datepicker本身显然不支持readonly属性，我没有看到另一种方法如何使它成为只读（你甚至为它创建了一个指令）

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

关于定制，你能详细说明为什么难以做到吗？您必须将原始指令的所有可能属性传递给您的指令，我猜？

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"/>

Angular UI Bootstrap datepicker：ng-readonly支持

3 个答案: