title: Using Angular Bootstrap datepicker inside of ui-grid (unstable 3.0.0)
body: <p>I am using AngularJS Bootstrap datepicker inside of the ui-grid (3.0.0 - unstable)</p>
  
  <p>I have implemented the datepicker through the custom cellTemplate (ui-grid):</p>
  
  
  
  <pre><code>{
        field: 'Wiedervorl',
        displayName: 'Wiedervorl.',
        enableCellEdit: true,
        enableCellEditOnFocus: true,
        enableHiding: false,
        cellTemplate: '&lt;div&gt;&lt;input ng-model="row.entity.Wiedervorl" ng-change="grid.appScope.addModifyFlag(row.entity)" ng-click="opened = true;" datepicker-popup="dd.MM.yyyy" is-open="opened" datepicker-options="grid.appScope.dateOptions" datepicker-append-to-body="true" type="text" /&gt;&lt;/div&gt;',
        cellFilter: 'date',
        cellClass: function () {
          return 'text-left';
        },
        filter: {
          placeholder: 'date',
          condition: uiGridConstants.filter.CONTAINS
        },
        width: '7%'
      },
  </code></pre>
  
  <p>There is a flag 'opened' inside of the datepicker input which is isolated exactly for one instance of this input element (datepicker instance).</p>
  
  <p>The problem is, that after opening one more datepicker in another row, the previous one doesn't close and multiple datepickers can be opened at the same time.</p>
  
  <p><img src="https://i.stack.imgur.com/KQl87.png" alt="enter image description here"></p>
  
  <p>I tried to add "ng-blur" to the input, but it executed at the moment, when datepicker is opening.</p>
  
  <p>Any ideas, how to accomplish the closing of previous datepicker instance inside of the UI-Grid ? To make only one active at a time.</p>
  
  <p>Thanks</p>