Displaying multiple Angular Bootstrap Datepicker components in a table

Question

I have a table:

<table class="table " id="Table" width="100%">
    <thead>
      <tr>
        <th>ID</th>
        <th>From</th>
        <th>To</th>
        <th>Total</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="id in inputID">
        <td class="col-md-1"> {{ id }} </td>
        <td class="col-md-5">
          <div class="form-group">
            <div class="col-sm-10">
              <p class="input-group">
                <input type="text" class="form-control" datetime-picker="dd/MM/yyyy HH:mm" ng-model="ctrl.picker4.date" is-open="ctrl.picker4.open" datepicker-options="ctrl.picker4.datepickerOptions" save-as="json"/>
                <span class="input-group-btn">
                  <button type="button" class="btn btn-default" ng-click="ctrl.openCalendar($event, 'picker4')"><i class="fa fa-calendar"></i></button>
              </span>
              </p>
            </div>
          </div>

        </td>
        <td class="col-md-5">
          <div class="form-group">
            <div class="col-sm-10">
              <p class="input-group">
                <input type="text" class="form-control" datetime-picker="dd/MM/yyyy HH:mm" ng-model="ctrl.picker5.date" is-open="ctrl.picker5.open" datepicker-options="ctrl.picker5.datepickerOptions" initialPicker='time' save-as="json" />
                <span class="input-group-btn">
                  <button type="button" class="btn btn-default" ng-click="ctrl.openCalendar($event, 'picker5')"><i class="fa fa-calendar"></i></button>
              </span>
              </p>
            </div>
          </div>
        </td>
        <td class="col-md-1">
          <p class="form-control-static">{{ ctrl.timeRange }} (minutes)</p>
        </td>
      </tr>
    </tbody>
  </table>

I am using Datepicker from Angular UI Bootstrap in one of the table cells. When I click the Calendar icon in one row and choose a day, then all rows are replaced with a string value representing the datepicker's value.

http://plnkr.co/edit/59KKPq?p=preview

Answer 1

You can move your date picker into a directive with an isolate scope. That will make it a component that won't be affected by the others.

Here is a working Plunker based on your example: http://plnkr.co/edit/K0eVeR?p=preview

Notice in the Plunker that the ones on the left use the component and work independently. The ones on the right use the old way and hence interfere with each other.

The main code that I added is in the JS:

app.directive('myDatePicker', function() {
return {
    template: '<p class="input-group">'+
    '<input ng-init="isOpen=false" type="text" class="form-control" datetime-picker="dd/MM/yyyy HH:mm" ng-model="date" is-open="isOpen" datepicker-options="datepickerOptions" save-as="json"/>' +
  '<span class="input-group-btn">' +
  '<button type="button" class="btn btn-default" ng-click="isOpen=!isOpen"><i class="fa fa-calendar"></i></button>' +
  '</span></p>',
    restrict: 'E',
    scope: {
      date: "=",
      datepickerOptions: "="
    }
  };
});