Angular UI Bootstrap datepicker：ng-readonly支持

Angular UI Bootstrap datepicker does not honors ng-readonly attribute. If ng-readonly expression is true, text input field is greyed and can not be modified, but datepicker's calendar pops up, allowing modification of form field.

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

So far i tryed 3 approaches (see http://plnkr.co/edit/KHrbbI6W1pWG5ewSsE9r?p=preview), both of which are rather hackish and ugly:

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

Disabling of all dates in datepicker if it should be readonly.

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

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

in html file and

在html文件和

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

in controller.

在控制器中。

Not allowing datepicker popup div to pop up.

不允许弹出datepicker弹出div。

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

in html file and

在html文件和

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

in controller. Blinking datepicker looks terrible.

在控制器中。闪烁的datepicker看起来很糟糕。

Replacing datepicker's text input with another readonly input field without datepicker attached.

将datepicker的文本输入替换为另一个readonly输入字段，而不附加datepicker。
```
<datepicker-ro-fix datepicker-popup="dd.MM.yyyy" ng-model="dt" ng-readonly="ro" />
```
in html file and

在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>',
  };
});
```
in js file. This seems to be the best solution so far, but the downside is that now there are two input elements instead of one, both have some hardcoded properties.

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

First and second approaches require me to add a bunch of code into form controller per each date input field, Third is much harder to customise.

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

I am new to angular and should be missing something. Is there some better way to make input fields with datepicker really read-only?

我是棱角分明的新手，应该错过一些东西。是否有更好的方法使datepicker的输入字段真正只读？

3 个解决方案

#1

Your third approach is quite nice, imho.

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

Given that the datepicker itself obviously does not support readonly property, I don't see another way how to make it read-only (and you even created a directive for it)

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

Your second approach sometimes results in minor flickering when clicking on the input (is it just me?)

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

As to customization, could you elaborate why it is difficult to do do? You'd have to pipe all the possible attributes of the original directive through to your directive, I guess?

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

#2

ng-disabled="true"

NG-禁用= “真”

worked for me. Angularjs: 1.2.9 and ui-boostrap: 0.8.0

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

Unfortunately I do not have reputation enough to comment on the original answer

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

#3

Use ng-disabled="true"

使用ng-disabled =“true”

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

#1