Question

我试图在Angular UI-Grid的标题模板上添加一个Bootstrap DateRangePicker。我可以看到模板工作正常，因为它显示了Bootstrap图标。我不想使用原生的角度类型：＆＃39; date＆＃39;。我想使用引导日期选择器。

我已经拥有了所需的所有内容。

<!-- 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 Grid columnDefinitons：

{ 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 Picker。

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输入元素中。您也可以从自定义模板直接访问范围。您需要在grid.appScope前加上要在控制器范围内访问的每个属性/方法：

您可以在行模板中使用grid.appScope来访问控制器范围内的元素。

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

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

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>

在Angular Ui-Grid headerCellTemplate中添加Bootstrap DateRangePicker

1 个答案: