Angularjs Angular.js ui网格自定义日期过滤器

我使用的是角度网格，ui网格，位于

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

我似乎能够在columnDefs:

{field:'mixedDate'，cellFilter:'date'，filterHeaderTemplate:'From to'}中使用此命令将控件放在我想要的位置

。我还可以通过设置data ng model=“colFilter.term”将这些内容放在不同的范围内，从而实现某种过滤。不过，过滤似乎并没有达到相同的效果

有没有人有这方面的代码可以工作，或者可以为我指出正确的方向

在他们自己的网站上有一些关于这个主题的教程，但我不太确定如何操作它们以满足我的需要，或者是否可能

---

你是说这样的事吗？
首先，你应该包括
然后还将为其创建一个指令：

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中，您还需要使用客户过滤器和过滤器标题模板：

筛选器：[{condition:checkStart}，{condition:checkEnd}]，filterHeaderTemplate:'from:to:'

假设您使用的是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;
    }

---

如果其他人正在寻找解决方案，我在网格头中使用带有日期选择器的ui引导模式实现了自定义

FROM

和

to

过滤器
回想起来很明显，但找到解决方案的关键之一是确保填充网格中日期列的日期值实际上是

date

类型。事实证明，将从日期选择器中选择的日期与字符串进行比较不会让您走得很远
注意：此解决方案依赖于lodash进行某些数据转换

var-app=angular.module（'app'，['ngAnimate'，'ui.grid'，'ui.grid.selection'，'ui.bootstrap']）；
app.controller（'MainCtrl'，['$scope'，'$http'，'uiGridConstants'，函数（$scope，$http，uiGridConstants）{
$scope.gridOptions={
启用筛选：正确，
onRegisterApi:函数（gridApi）{
$scope.gridApi=gridApi；
},
columnDefs：[
{
字段：“日期和时间”，
displayName:'日期时间'，
启用筛选：正确，
enableCellEdit:false，
filterHeaderTemplate:“”，
过滤器：[
{
名称：“From”，
条件：uiGridConstants.filter.GREATER_大于或等于
},
{
姓名：'至'，
条件：uiGridConstants.filter.LESS_小于或等于
}
],
cellFilter:'date:'M/d/yyyy h:mm:ss a'，
宽度：“40%”
},
{
字段：“数量”，
displayName:'数量'，
enableCellEdit:false，
启用筛选：false
},
{
字段：“单位成本”，
displayName:'单位成本'，
enableCellEdit:false，
启用筛选：false
},
{
字段：“总成本”，
displayName:'总成本'，
enableCellEdit:false，
启用筛选：false
}
]
};
//在plnkr中，从外部文件获取以下数据
//$http.get（'grid-data.json'）
//.成功（功能（数据）{
//$scope.gridOptions.data=数据；
$scope.gridOptions.data=[
{
“日期时间”：“2015-10-12T10:46:27.000Z”，
“数量”：3，
“单位成本”：0.25，
“总成本”：0.75
},
{
“日期时间”：“2015-10-18T06:09:27.000Z”，
“数量”：4，
“单位成本”：0.25，
“总成本”：1.00
},
{
“日期时间”：“2015-10-05T11:57:27.000Z”，
“数量”：6，
“单位成本”：0.55，
“总成本”：0.90
},
{
“日期时间”：“2015-10-21T03:42:27.000Z”，
“数量”：8，
“单位成本”：0.25，
“总成本”：2.00
},
{
“日期时间”：“2015-09-29T18:25:27.000Z”，
“数量”：3，
“单位成本”：0.45，
“总成本”：1.35
},
{
“日期时间”：“2015-09-19T21:13:27.000Z”，
“数量”：5，
“单位成本”：0.25，
“总成本”：1.25
},
{
“日期时间”：“2015-08-31T15:46:27.000Z”，
“数量”：7，
“单位成本”：0.10，
“总成本”：0.70
},
{
“日期时间”：“2015-10-12T10:14:27.000Z”，
“数量”：2，
“单位成本”：0.65，
“总成本”：1.30
}
];
//确保日期值是日期对象
_.forEach（$scope.gridOptions.data，函数（val）{
val.DATE\u TIME=新日期（val.DATE\u TIME）；
});
}])
.controller（'gridDatePickerFilterCtrl'、['$scope'、'$timeout'、'$uibModal'，'uiGridConstants'，函数（$scope，$timeout，$uibModal，uiGridConstants）{
$timeout（函数（）{
log（$scope.col）；
变量字段=$scope.col.colDef.name；
var allDates=\.map（$scope.col.grid.appScope.gridOptions.data，函数（数据）{
返回基准[字段]；
});
var minDate=u.min（所有日期）；
var maxDate=u0.max（所有日期）；
$scope.openDatePicker=函数（过滤器）{
var modalInstance=$uibModal.open({
templateUrl:“自定义日期筛选器.html”，
控制器：“customGridDateFilterModalCtrl作为自定义”，
尺寸：'md'，
windowClass:“自定义日期筛选器模式”，
决心：{
filterName:[函数（）{
返回filter.name；
}],
minDate:[函数（）{
返回新日期（minDate）；
}],
maxDate:[函数（）{
返回新日期（maxDate）；
}],
}
});
modalInstance.result.then（函数（selectedDate）{
console.log（'date'，selectedDate）；
$scope.colFilter.listTerm=[]；
console.log（所选日期的类型）；
console.log（选择日期的日期实例）；
$scope.colFilter.term=selectedDate；
});
};
});
}])
.controller（'customGridDateFilterModalCtrl'、['$scope'、'$rootScope'、'$log'、'$uib'
condition: function(term, value){
    if (!term) return true;
    var valueDate = new Date(value);
    var replaced = term.replace(/\\/g,'');
    var termDate = new Date(replaced);
    return valueDate < termDate;
},
placeholder: 'less than'

  { field: 'DATE_TIME', name: 'Date Time', cellTooltip: true,
    cellFilter: 'date:\'yyyy-MM-dd\'',
    cellTemplate: 'ui-grid/date-cell',
    filterHeaderTemplate: 'ui-grid/custom-ui-grid-filter',
    width: '40%',
    filters: [
        {
          condition: function(term, value, row, column){
                if (!term) return true;
                var valueDate = new Date(value);
                return valueDate >= term;
            },
          placeholder: 'Greater than or equal'
        },
        {
          condition: function(term, value, row, column){
                if (!term) return true;
                var valueDate = new Date(value);
                return valueDate <= term;
            },
          placeholder: 'Less than or equal'
        }
    ],
    headerCellClass: $scope.highlightFilteredHeader }