我正在尝试制作一个自定义过滤器,它将使用日期输入控件按日期过滤网格,一个用于小于,一个用于大于.
我似乎能够在columnDefs中使用它来获取我想要的控件：{field：’mixedDate’,cellFilter：’date’,filterHeaderTemplate：’< div> From< input type =“date”> ;到< input type =“date”>< / div>‘ }.当将这些东西放在不同的范围内时,我也可以通过设置data-ng-model =“colFilter.term”来进行某种过滤.尽管如此,过滤似乎并不均衡.
有没有人有这方面的代码可行或可以指向正确的方向？
以下是关于他们自己网站上的主题的一些教程,但我不太确定如何操纵它们以满足我的需求或者甚至可能.
首先,你应该包括jQuery UI Datepicker
然后你还将为它创建一个指令：
app.directive('datePicker',function(){
return {
restrict : "A",require: 'ngModel',link : function(scope,element,attrs,ngModel){
$(function(){
$(element).datepicker({
changeMonth: true,changeYear: true,closeText: 'Clear',showButtonPanel: true,onClose: function () {
var event = arguments.callee.caller.caller.arguments[0];
// If "Clear" gets clicked,then really clear it
if ($(event.delegateTarget).hasClass('ui-datepicker-close')) {
$(this).val('');
scope.$apply(function() {
ngModel.$setViewValue(null);
});
}
},onSelect: function(date){
scope.$apply(function() {
ngModel.$setViewValue(date);
});
}
});
})
}
}
})
在您的columnDefs中,您还需要使用客户过滤器和过滤器标头模板：
filters：[{condition：checkStart},{condition：checkEnd}],filterHeaderTemplate：’< div class =“ui-grid-filter-container”> from：< input style =“display：inline; width：30 ％“class =”ui-grid-filter-input“date-picker type =”text“ng-model =”col.filters [0] .term“/> to：< input style =“display：inline; width：30％”class =“ui-grid-filter-input”date-picker type =“text”ng-model =“col.filters [1] .term” />< / DIV>” 假设您正在使用momentjs
过滤器功能如下：
function checkStart(term,value,row,column) {
term = term.replace(/\\/g,"")
var now = moment(value);
if(term) {
if(moment(term).isAfter(now,'day')) return false;;
}
return true;
}
function checkEnd(term,"")
var now = moment(value);
if(term) {
if(moment(term).isBefore(now,'day')) return false;;
}
return true;
}