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

Question

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

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

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

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

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

• ui-grid过滤
• ui-grid自定义过滤

Answer 1

你的意思是这样的吗？

首先你应该包含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, value, row, column) {
        term = term.replace(/\\/g,"")
        var now = moment(value);
        if(term) {
            if(moment(term).isBefore(now, 'day')) return false;;
        } 
        return true;
    }