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

All we need is an easy explanation of the problem, so here it is.

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="//"/>
<script type="text/javascript" src="//"/>
<script src="//"></script>
<script src="//"></script>
<script src="//"></script>
<script type="text/javascript" src="daterangepicker.js"></script>
<link rel="stylesheet" href="//" rel="nofollow noreferrer noopener" type="text/css" />
<link href="//" rel="nofollow noreferrer noopener" rel="stylesheet">
<link rel="stylesheet" href="main.css" rel="nofollow noreferrer noopener" type="text/css">
<link rel="stylesheet" type="text/css" media="all" href="daterangepicker.css" rel="nofollow noreferrer noopener" />

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>

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

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

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

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='' >" +
                                    "<button type='submit'  class='btn ' >Filter</button>" +
                                    "</form> </div>",

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from or, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply