title: Angular UI Bootstrap datepicker: ng-readonly support
body: <p>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.</p>
  
  <p>So far i tryed 3 approaches (see <a href="http://plnkr.co/edit/KHrbbI6W1pWG5ewSsE9r?p=preview">http://plnkr.co/edit/KHrbbI6W1pWG5ewSsE9r?p=preview</a>), both of which are rather hackish and ugly:</p>
  
  <ul>
  <li><p>Disabling of all dates in datepicker if it should be readonly.</p>
  
  <pre><code>&lt;input type="text" datepicker-popup="dd.MM.yyyy" ng-model="dt" ng-readonly="ro" date-disabled="disabled(date, mode)" /&gt;
  </code></pre>
  
  <p>in html file and</p>
  
  <pre><code>$scope.$watch('ro', function(ro) {
    $scope.dt = new Date($scope.dt); // force datepicker div refresh
  });
  $scope.disabled = function(date, mode) {
    return $scope.ro;
  };
  </code></pre>
  
  <p>in controller.</p></li>
  <li><p>Not allowing datepicker popup div to pop up.</p>
  
  <pre><code>&lt;input type="text" datepicker-popup="dd.MM.yyyy" ng-model="dt" ng-readonly="ro" is-open="opened" /&gt;
  </code></pre>
  
  <p>in html file and</p>
  
  <pre><code>$scope.$watch('opened', function(v1, v2, v3) {
    if ($scope.ro &amp;&amp; v1) {
      $timeout(function() {
        $scope.opened = false;
      });
    }
  });
  </code></pre>
  
  <p>in controller. Blinking datepicker looks terrible.</p></li>
  <li><p>Replacing datepicker's text input with another readonly input field without datepicker attached.</p>
  
  <pre><code>&lt;datepicker-ro-fix datepicker-popup="dd.MM.yyyy" ng-model="dt" ng-readonly="ro" /&gt;
  </code></pre>
  
  <p>in html file and</p>
  
  <pre><code>m.directive('datepickerRoFix', function() {
    return {
      restrict: 'E',
      require: 'ngModel',
      scope: {
        ngModel: '=',
        ngReadonly: '=',
      },
      template: '&lt;span&gt;'
        + '&lt;input ng-hide="ngReadonly" type="text" datepicker-popup="dd.MM.yyyy" ng-model="ngModel" /&gt;'
        + '&lt;input ng-show="ngReadonly" type="text" readonly="true" value="{{ ngModel | date:\'dd.MM.yyyy\'}}" /&gt;'
        + '&lt;/span&gt;',
    };
  });
  </code></pre>
  
  <p>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.</p></li>
  </ul>
  
  <p>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.</p>
  
  <p>I am new to angular and should be missing something.
  Is there some better way to make input fields with datepicker really read-only?</p>