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

我正在使用角度网格 ui-grid，位于ui-grid.info http://ui-grid.info.

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

我似乎可以在 columnDefs 中使用它来将控件放在我想要的位置：{ field: 'mixedDate', cellFilter: 'date', filterHeaderTemplate: '<div>From <input type="date"> to <input type="date"></div>' }。当将这些东西放在不同的范围中时，我还可以通过设置 data-ng-model="colFilter.term" 来进行某种过滤。不过，过滤似乎甚至没有做到平等。

有谁有有效的代码或者可以为我指明正确的方向吗？

以下是他们自己网站上有关该主题的一些教程，但我不太确定如何操作它们来满足我的需求，或者是否可能。

• ui网格过滤 http://ui-grid.info/docs/#/tutorial/103_filtering
• ui-grid 自定义过滤 http://ui-grid.info/docs/#/tutorial/306_custom_filters

Do you mean something like this ?

首先你应该包括jQuery UI 日期选择器 https://jqueryui.com/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, value, row, column) {
        term = term.replace(/\\/g,"")
        var now = moment(value);
        if(term) {
            if(moment(term).isBefore(now, 'day')) return false;;
        } 
        return true;
    }