Problems getting Bootstrap DateRangePicker to work in filterHeaderTemplate with Modal popup in UI-Grid

Question

I'm trying to add a bootstrap DateRangePicker in the Filter Header Template for an Angular UI-Grid. I can see that the template is working properly because it shows the Bootstrap Icon. I do not want to use the native angular Type:'date'. I want to use a bootstrap date picker. I have a Plunker as an example further down, that shows the native datepicker working and the Bootstrap Datepicker button clickable but not displaying anyting.

I have all the includes needed for this to show up.

<!-- Include Required Prerequisites -->
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"/>
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"/>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.js"></script>
<script src="//cdn.rawgit.com/angular-ui/bower-ui-grid/v3.0.6/ui-grid.min.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.1.2.js"></script>
<script type="text/javascript" src="daterangepicker.js"></script>
<link rel="stylesheet" href="//cdn.rawgit.com/angular-ui/bower-ui-grid/v3.0.6/ui-grid.min.css" type="text/css" />
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="main.css" type="text/css">
<link rel="stylesheet" type="text/css" media="all" href="daterangepicker.css" />

This is my Template HTML

<!-- DatePickerTemplate HTML -->
<script type="text/ng-template" id="DatePickerTemplate.html">
  <div ng-controller="DatePickerController">
    <div>Sent On</div>
      <div class="input-group date" datepicker-popup is-open="true"
       ng-model="COL_FIELD"  min-date="2010-01-01">
       <input class="form-control">
       <div class="input-group-addon">
       <span class="glyphicon glyphicon-th"></span>
      </div>
    </div>
  </div>
</script>

This is my UI Grid columnDefinitons:

{ name: 'Sent On', field: 'SentDateTime', enableCellEdit: false,
  allowCellFocus: false, type: 'date', cellFilter: 'date:"M-d-yy H:mm"',
  filterHeaderTemplate: 'DatePickerTemplate.html' }

This is my Directive

app.directive("filterDatePicker", function(){
    return {
        restrict: 'AE',
        scope: {
        getData: '=' // I'm trying to get  $scope.gridOptions here not working
    },
        templateUrl: 'DatePickerTemplate.html'
    };
});

When I click on the bootstrap button it doesn't do anything. I'm not getting any errors in the console either.

Here is a Plunker, you can see both Date filter headers, one on the left is native the one on the right is the bootstrap which is not working.

Can someone please give me an idea of where I'm going wrong. I can't get the BootStrap DateRangePicker to open. I really want to add a DateRangePicker not just a regular Bootstrap Date Picker.

Date Filter Plunker

Answer 1

This is an example for using daterangepicker in filterHeaderTemplate but not using angular template. First, Read this:

https://github.com/fragaria/angular-daterangepicker

then in your ui-grid column for the filterHeaderTemplate use something like:

  {
                            name: 'CreatedDate',
                            displayName: 'Created Date',
                            filterHeaderTemplate: "<div >" +
                                                  "<form  ng-submit='grid.appScope.yourDateFiltering()'>" +
                                    " <input date-range-picker  class='form-control date-picker'  type='text' ng-model='grid.appScope.vm.datePicker.date' >" +
                                    "<button type='submit'  class='btn ' >Filter</button>" +
                                    "</form> </div>",
}