在Angular Ui-Grid headerCellTemplate中添加Bootstrap DateRangePicker

我试图在Angular UI-Grid的头文件模板上添加一个引导DateRangePicker。我可以看到模板正常工作，因为它显示Bootstrap图标。我不想使用原生的类型：'日期'。我想使用引导日期选择器。在Angular Ui-Grid headerCellTemplate中添加Bootstrap DateRangePicker

我有这个需要显示的所有内容。

<!-- 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电网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' 
    }; 
});

我有一个空的控制器那一刻，我想要什么o在控制器做的就是日期，我从引导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

来源

2016-02-23 JEuvin

你扭转局面;）“是否有人可以创建一个plunker或给我，我去错了地方的想法”这应该是： “这是一个Plunker，所以你可以看到它出错了。”请花几分钟时间阅读以下内容：[mcve] – iH8

我为每个iH8建议添加了一个运动员。 – JEuvin

在抢劫犯中，标签是否颠倒了？不是第三列不工作的引导程序，不是第二列（工作中）？ –

它的工作原理，采用了棱角分明（1.5.0），用户界面的自举（1.1.2）和UI的网格（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>

来源

2016-02-24 16:15:22 iH8

我刚刚对掠夺者进行了修改。这不起作用，因为我已经在'$ scope.gridOptions'定义中使用'appScopeProvide'。其中有一种方法可以让我的模式弹出和引导日历工作以及。感谢您的回应。 – JEuvin

抱歉，您无法更改整个问题的上下文/主题。你的问题是关于UI-bootstrap timepicker作为UI-Grid中的头部。就我而言，我认为这个问题是答案。我建议你考虑这样做。或等待更好的答案。如果您有新问题，请使用正确的标题/上下文/示例发布新问题。我很乐意提供帮助。让我们为未来的用户保留这个有用的。 – iH8

我将它标记为答案，我用正确的上下文提出了一个新问题。 [修订后的问题]（http://stackoverflow.com/q/35628616/2926260?sgp=2） – JEuvin

在Angular Ui-Grid headerCellTemplate中添加Bootstrap DateRangePicker

回答

相关问题