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

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