问题让 Bootstrap DateRangePicker 在 filterHeaderTemplate 中使用 UI-Grid 中的模态弹出窗口工作答案

【问题标题】：Problems getting Bootstrap DateRangePicker to work in filterHeaderTemplate with Modal popup in UI-Grid问题让 Bootstrap DateRangePicker 在 filterHeaderTemplate 中使用 UI-Grid 中的模态弹出窗口工作
【发布时间】：2016-02-25 13:26:21
【问题描述】：

我正在尝试在 Angular UI-Grid 的过滤器标题模板中添加引导程序 DateRangePicker。我可以看到模板工作正常，因为它显示了引导图标。我不想使用原生的角度类型：'日期'。我想使用引导日期选择器。我有一个 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 Grid 列定义：

{ 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'
    };
});

当我单击引导按钮时，它什么也不做。我在控制台中也没有收到任何错误。

这是一个 Plunker，你可以看到两个 Date 过滤器标题，左边一个是原生的，右边一个是不工作的引导程序。

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

Date Filter Plunker

【问题讨论】：

标签： angularjs angularjs-directive twitter-bootstrap-3 angular-ui-grid daterangepicker

【解决方案1】：

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

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

然后在您的 ui-grid 列中为 filterHeaderTemplate 使用类似：

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

【讨论】：