问题描述
我想在过滤器头模板的角度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.
推荐答案
这是在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网格的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!