angularjs – Angular.js ui-grid自定义日期过滤器

我正在使用角度网格,ui-grid,位于 ui-grid.info.

我正在尝试制作一个自定义过滤器,它将使用日期输入控件按日期过滤网格,一个用于小于,一个用于大于.

我似乎能够在columnDefs中使用它来获取我想要的控件：{field：’mixedDate’,cellFilter：’date’,filterHeaderTemplate：’< div> From< input type =“date”&gt ;到< input type =“date”>< / div>‘ }.当将这些东西放在不同的范围内时,我也可以通过设置data-ng-model =“colFilter.term”来进行某种过滤.尽管如此,过滤似乎并不均衡.

有没有人有这方面的代码可行或可以指向正确的方向？

以下是关于他们自己网站上的主题的一些教程,但我不太确定如何操纵它们以满足我的需求或者甚至可能.

> ui-grid filtering
> ui-grid custom filtering

你的意思是这样的吗？

首先,你应该包括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;
    }