获得引导DateRangePicker问题在filterHeaderTemplate与模式弹出工作在UI网格 [英] Problems getting Bootstrap DateRangePicker to work in filterHeaderTemplate with Modal popup in UI-Grid

问题描述

我想在过滤器头模板的角度UI格栅加入启动DateRangePicker。我可以看到，模板正常工作，因为它显示了引导图标。我不想使用本地角类型：日期。我想用一个自举日期选择器。我有一个Plunker作为一个例子进一步下跌，显示本地日期选择器的工作和自举日期选择器按钮点击，但不显示点儿。

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

这是我的模板HTML

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>

这是我的UI电网columnDefinitons：

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' }

这是我的指令

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.

下面是一个Plunker，你可以看到这两个日期过滤头，一个在左边是原产右边的一个是不正常的引导。

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.

有人可以给我我要去哪里错了的想法。我无法引导DateRangePicker打开。我真的想添加一个DateRangePicker不只是一个普通的自举日期选择器。

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.

日期过滤器Plunker

推荐答案

这是在filterHeaderTemplate使用daterangepicker而不是采用了棱角分明的模板的例子。首先，阅读本：

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

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

然后在UI格列中filterHeaderTemplate使用这样的：

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

这篇关于获得引导DateRangePicker问题在filterHeaderTemplate与模式弹出工作在UI网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！