首页 文章

Angular UI Bootstrap datepicker:ng-readonly支持

提问于
浏览
14

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 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的文本输入,而不附加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的输入字段真正只读?

3 回答

  • 10

    ng-disabled="true"

    为我工作 . Angularjs: 1.2.9ui-boostrap: 0.8.0

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

  • 0

    使用 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

    你的第三种方法非常好,imho .

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

    点击输入时,你的第二种方法有时会导致轻微的闪烁(是不是我?)

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

相关问题