Bootstrap DateRangePicker 在 filterHeaderTemplate 中使用 UI-Grid 中的模态弹出窗口时出现问题

Question

我正在尝试在过滤器 Header 模板中为 Angular UI-Grid 添加 bootstrap DateRangePicker。我可以看到模板工作正常，因为它显示了 Bootstrap 图标。我不想使用本机 angular 类型：'date'。我想使用 bootstrap 日期选择器。我有一个 Plunker 作为示例，它显示了本机日期选择器工作和 Bootstrap Datepicker 按钮可单击但不显示任何内容。

我拥有显示此内容所需的所有内容。

<!-- 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" />

这是我的模板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>

这是我的 UI 网格列定义：

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

这是我的指令

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

当我点击 bootstrap 按钮时，它没有执行任何操作。我也没有在控制台中收到任何错误。

这是一个 Plunker，您可以看到两个日期过滤器 headers，左边一个是原生的，右边一个是不起作用的 bootstrap。

谁能告诉我哪里出错了。我无法打开 BootStrap DateRangePicker。我真的很想添加一个 DateRangePicker，而不仅仅是一个常规的 Bootstrap 日期选择器。

Date Filter Plunker

Answer 1

这是在 filterHeaderTemplate 中使用 daterangepicker 但不使用 angular 模板的示例。首先，请阅读：

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

然后在 filterHeaderTemplate 的 ui-grid 列中使用如下内容：

  {
                            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>",
}

Bootstrap DateRangePicker 在 filterHeaderTemplate 中使用 UI-Grid 中的模态弹出窗口时出现问题

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

daterangepicker

angularjs

angularjs-directive

twitter-bootstrap-3

angular-ui-grid