Angular UI Bootstrap datepicker：ng-readonly支持

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

到目前为止我tryed 3种方法（见http://plnkr.co/edit/KHrbbI6W1pWG5ewSsE9r?p=preview），这两者都是相当hackish的和丑陋：

在日期选择器的所有日期的禁用，如果它应该是只读的。

<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弹出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文件

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

第一和第二方法需要我一串代码添加到每每个日期输入字段形式的控制器，第三是更难定制。

我是新来的角，应该缺少的东西。有没有更好的方法使datepicker的输入字段真的只读？

来源

2013-11-28 Vasily Redkin

为什么不显示日期为文本和隐藏输入等等它仍然可用于角度验证目的 – charlietfl

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

这意味着没有输入显示给用户...笑话文本和按钮 – charlietfl

你的第三种方法是相当不错的，恕我直言。

鉴于日期选择器本身显然不支持只读属性，我没有看到另一种方式如何使它只读（你甚至创造了一个指令，它）

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

至于定制，你能否详细说明为什么它很难做到？我猜你必须将原始指令的所有可能属性都输入到指令中。

来源

2014-07-04 13:29:25 SebastianRiemer

其实，这就是我做到的。添加属性是很痛苦的。 –

使用ng-disabled="true"

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

来源

2014-10-17 08:04:46 Vaibu

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

ng-disabled="true"

为我工作。 Angularjs：1.2.9和 UI的自举：0.8.0

不幸的是，我没有足够的声誉对原答案进行评论

来源

2015-03-06 18:59:39

我认为这是一个情况，张贴这个答案是可以接受的 – jrharshath

Angular UI Bootstrap datepicker：ng-readonly支持

回答

相关问题