Angular UI Bootstrap datepicker: ng-readonly support
ng-disabled="true"
worked for me.Angularjs: 1.2.9 and ui-boostrap: 0.8.0
Unfortunately I do not have reputation enough to comment on the original answer
Your third approach is quite nice, imho.
Given that the datepicker itself obviously does not support readonly property, I don't see another way how to make it read-only (and you even created a directive for it)
Your second approach sometimes results in minor flickering when clicking on the input (is it just me?)
As to customization, could you elaborate why it is difficult to do do? You'd have to pipe all the possible attributes of the original directive through to your directive, I guess?
Use ng-disabled="true"
<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="date" min="minDate" max="maxDate" ng-disabled="true" readonly="true"/>