使 Bootstrap DateRangePicker 在 UI-Grid 中带有模态弹出窗口的 filterHeaderTemplate 中工作的问题 [英] Problems getting Bootstrap DateRangePicker to work in filterHeaderTemplate with Modal popup in UI-Grid
问题描述
我正在尝试在 Angular UI-Grid 的过滤器标头模板中添加引导 DateRangePicker.我可以看到模板工作正常，因为它显示了 Bootstrap 图标.我不想使用原生角度类型:'date'.我想使用引导日期选择器.我有一个 Plunker 作为进一步的例子，它显示了本机日期选择器的工作和 Bootstrap 日期选择器按钮可点击但不显示任何内容.
我拥有显示此内容所需的所有内容.
<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="样式表"><link rel="stylesheet" href="main.css" type="text/css"><link rel="stylesheet" type="text/css" media="all" href="daterangepicker.css"/>这是我的 HTML 模板
<script type="text/ng-template" id="DatePickerTemplate.html"><div ng-controller="DatePickerController"><div>发送于</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>这是我的 UI 网格 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(){返回 {限制:'AE'，范围: {getData: '='//我试图让 $scope.gridOptions 在这里不起作用},templateUrl: 'DatePickerTemplate.html'};});当我点击 bootstrap 按钮时，它什么也没做.我也没有在控制台中收到任何错误.
这是一个 Plunker，您可以看到两个日期过滤器标头，左侧是原生的，右侧是无法正常工作的引导程序.
有人可以告诉我我哪里出错了.我无法打开 BootStrap DateRangePicker.我真的想添加一个 DateRangePicker 而不仅仅是一个常规的 Bootstrap 日期选择器.
这是在 filterHeaderTemplate 中使用 daterangepicker 但不使用 angular 模板的示例.首先，请阅读:
https://github.com/fragaria/angular-daterangepicker然后在 filterHeaderTemplate 的 ui-grid 列中使用如下内容:
<代码> {name: '创建日期',displayName: '创建日期',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>",}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" />
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>
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' }
This is my Directive
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.
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.
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.
This is an example for using daterangepicker in filterHeaderTemplate but not using angular template. First, Read this:
https://github.com/fragaria/angular-daterangepicker
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>",
}
这篇关于使 Bootstrap DateRangePicker 在 UI-Grid 中带有模态弹出窗口的 filterHeaderTemplate 中工作的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
