jordan jordan - 25 days ago 19
AngularJS Question

AngularJS UI-Bootstrap Datepicker is not working inside ng-repeat?

I have been trying to use date pickers inside ng-repeat but the datepicker is not working inside ng-repeat, can anyone help me solve this issue.

Here is my code,

<div ng-repeat="dt in dates">
<div class="col-md-6">
<p class="input-group">
<input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dt" is-open="popup1.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>

Answer

check this demo: http://plnkr.co/edit/31HMeRA7yUkiPWaVGPnQ?p=preview

<h1>Datepicker inside repeater demo</h1>


<div class="container content-body">
<div class="row" ng-repeat="dt in dates">
    <div class="col-md-6">
        <p class="input-group">
          <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt.date" is-open="dt.opened" datepicker-options="dateOptions" />
          <span class="input-group-btn">
            <button type="button" class="btn btn-default" ng-click="open($event,dt)"><i class="glyphicon glyphicon-calendar"></i></button>
          </span>
        </p>
    </div>
</div>