Angular UI Bootstrap datepicker：ng-readonly 支持

Posted 2023-05-07

【中文标题】Angular UI Bootstrap datepicker：ng-readonly 支持

【英文标题】：Angular UI Bootstrap datepicker: ng-readonly support

【发布时间】：2013-12-14 14:38:32

【问题描述】：

Angular UI Bootstrap 日期选择器不支持 ng-readonly 属性。 如果 ng-readonly 表达式为真，则文本输入字段为灰色且无法修改，但会弹出 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 popup 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 文件中。这似乎是迄今为止最好的解决方案，但缺点是现在有两个输入元素而不是一个，它们都有一些硬编码的属性。

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

我是 Angular 新手，应该遗漏一些东西。 有没有更好的方法让 datepicker 的输入字段真正只读？

【问题讨论】：

为什么不将日期显示为文本并隐藏输入，以便它仍然可用于角度验证目的

@charlietfl，它与我的第三种方法有何不同？

表示没有向用户显示输入...开玩笑的文字和一个按钮

对我来说这是一个“功能”，所以我可以禁用手动文本输入，只允许用户使用日期选择器进行选择。 :)

【参考方案1】：

ng-disabled="true"

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

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

【讨论】：

我认为在这种情况下发布这个作为答案是可以接受的

【参考方案2】：

您的第三种方法非常好，恕我直言。

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

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

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

【讨论】：

事实上，我就是这样做的。添加属性很痛苦。

【参考方案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"/>

【讨论】：

在这种情况下你不能添加 ng-click 属性所以这不是一个好的解决方案。

仅使用 readonly="true" 而不要使用 ng-disabled="true" 这将允许添加 ng-click