web-dev-qa-db-ja.com

Angular UI Bootstrap datepicker：ng-readonly support

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ポップアップ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ファイルで。これはこれまでのところ最良の解決策のようですが、欠点は、入力要素が1つではなく2つになり、どちらにもハードコードされたプロパティがあることです。

1番目と2番目のアプローチでは、日付入力フィールドごとにフォームコントローラーに一連のコードを追加する必要があります。3番目のアプローチはカスタマイズがはるかに困難です。

私はangularに不慣れで、何かが欠けているはずです。datepickerを使用して入力フィールドを本当に読み取り専用にするより良い方法はありますか？

angularjsdatepickerangular-ui-bootstrap
15
Vasily Redkin

あなたの3番目のアプローチはとてもいいです、私見。

日付ピッカー自体が明らかに読み取り専用プロパティをサポートしていないことを考えると、それを読み取り専用にする別の方法はわかりません（そしてあなたはそれに対するディレクティブを作成しました）

2番目の方法では、入力をクリックしたときにちらつきが発生することがあります（それは私だけですか？）

カスタマイズに関して、なぜ難しいのか詳しく教えてください。元のディレクティブのすべての可能な属性をディレクティブにパイプする必要があると思いますか？

1
SebastianRiemer

ng-disabled="true"

私のために働いた。 Angularjs：1.2.9およびi-bootstrap：0.8.

残念ながら、私は元の答えにコメントするのに十分な評判がありません

11
Lars Johannesson

使用する ng-disabled="true"

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