添加Bootstrap DateRangePicker in Angular Ui-Grid headerCellTemplate

Question

我正在尝试在 Angular UI-Grid 的页眉模板上添加 bootstrap DateRangePicker。我可以看到模板工作正常，因为它显示了 Bootstrap 图标。我不想使用本机 angular 类型：'date'。我想使用 bootstrap 日期选择器。

我已准备好显示此内容所需的所有内容。

<!-- 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"/>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/latest/css/bootstrap.css" />

<!-- Include Date Range Picker -->
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"/>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/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"',
  headerCellTemplate: 'DatePickerTemplate.html' }

这是我的指令

app.directive("filterDatePicker", function(){
    return {
        restrict: 'E',
        scope: true,
        templateUrl: 'DatePickerTemplate.html'
    };
});

目前我有一个空控制器，我想在控制器中做的是在 BootStrap DateRangePicker 工作后获取我从中选择的日期

控制器

app.controller('DatePickerController', [
    '$scope', function($scope) {
        // return date picked from bootstrap datepicker
    }
]);

当我点击小菜单框时，它什么也没做。我在开发者控制台中也没有收到任何错误。

这是一个 Plunker，你可以看到两个 Date 列，左边一个是原生的，右边一个应该是 bootstrap，它不起作用。

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

Date Filter Plunker

Answer 1

有效，使用最新版本的 Angular (1.5.0)、UI-Bootstrap (1.1.2) 和 UI-Grid (3.1 .1) 更正了你犯的一些错误。您忘记将 ui.bootstrap 模块注入您的应用程序，并且您没有将 uib-datepicker-popup 指令添加到您的 HTML 输入元素。此外，您还可以从自定义模板直接访问范围。您需要在控制器范围内为每个要访问的 property/method 添加 grid.appScope 前缀：

You can use grid.appScope in your row template to access elements in your controller's scope.

http://ui-grid.info/docs/#/tutorial/317_custom_templates

否则 "works"，至少到目前为止，弹出窗口在选项卡上打开，当您单击按钮时，它不会与 headercell 重叠，这可以用 CSS 解决，但是我会留给你弄清楚。希望这可以帮助。祝你的项目好运。这是一个工作片段：

angular.module('App', [
    'ui.bootstrap',
    'ui.grid'
]);

angular.module('App').controller('Controller', [
             '$scope',
    function ($scope) {

        $scope.gridOptions = {
            enableFiltering: true,
            columnDefs: [{
                field: 'date',
                filterHeaderTemplate: 'DatePicker.html'
            }]
        };
        
        $scope.datePicker = {
            opened: false,
            open: function () {
                $scope.datePicker.opened = true;
            }
        };

    }
]);

#grid {
  width: 100%;
  height: 250px;
}

<!DOCTYPE html>
<html ng-app="App">
    <head>
        <meta charset="utf-8" />
        <title>Angular 1.5.0</title>
        <script>document.write('<base href="' + document.location + '" />');</script>
        <link type="text/css" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
        <link type="text/css" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/3.1.1/ui-grid.css" />
        <script type="application/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js"></script>
        <script type="application/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.1.2/ui-bootstrap-tpls.js"></script>
        <script type="application/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/3.1.1/ui-grid.js"></script>
        <script type="text/ng-template" id="DatePicker.html">
            <p class="input-group">
                <input type="text" class="form-control" uib-datepicker-popup ng-model="grid.appScope.datePicker.value" is-open="grid.appScope.datePicker.opened" ng-required="true" close-text="Close" />
                <span class="input-group-btn">
                    <button type="button" class="btn btn-default" ng-click="grid.appScope.datePicker.open()">
                        <i class="glyphicon glyphicon-calendar"></i>
                    </button>
                </span>
            </p>
        </script>
    </head>
    <body ng-controller="Controller">
        <div id="grid" ui-grid="gridOptions"></div>
    </body>
</html>

添加Bootstrap DateRangePicker in Angular Ui-Grid headerCellTemplate

Add Bootstrap DateRangePicker in Angular Ui-Grid headerCellTemplate

uidatepicker

daterangepicker

angularjs

angular-ui-bootstrap

angular-ui-grid