angular ui 网格日期过滤器以搜索列中的日期

Question

我想在我的搜索栏中搜索日期，使用 angular ui 日期过滤器。

当我尝试在该列中搜索我的日期时，它没有显示正确的日期。我希望它显示用户搜索的完全匹配。示例：如果用户键入 22-aug-16，它应该只显示与该日期匹配的日期，假设如果用户单独键入 25-aug，它应该只显示与数据库中存在的任何年份的 8 月 25 日匹配的日期。

我试过我的代码，

.controller(
                'BlockADetailsController',
                [
                        '$scope', '$rootScope','$location','$routeParams', '$filter', 'CommonService', 'BlockADetailsService', '$q',
                        function($scope, $rootScope,$location, $routeParams, $filter, CommonService, BlockADetailsService, $q) {
$scope.changeActorGridOptions = {
enableFiltering : true,
columnDefs : [
                                            {
{
                                                name : 'lLDate',
                                                field : 'lLDate',                                               
                                                displayName : 'LAST_LOGIN',                                         
                                                width : '100',
                                                minWidth: '90',
                                                cellTemplate : '<div title="{{COL_FIELD | date:\'dd-MMM-yy\' }}">{{COL_FIELD | date:"dd-MMM-yy"  }}</div>',
                                                headerTooltip : true,
                                                cellClass : function(grid, row,
                                                        col, rowRenderIndex,
                                                        colRenderIndex) {
                                                    return 'gridGroupCell';
                                                },
                                                headerCellFilter : 'translate',                                         
                                            },

这里我也试过

type: 'date'

并且还添加了Whosebug同类问题中提到的onselect函数

喜欢，

onSelect: function(date){
                    scope.$apply(function() {
                       ngModel.$setViewValue(date);
                    });
                }

请帮助我，希望我能解释我的要求ui。请提供一些帮助。

这是我正在搜索的列字段，

Here i want to search my required date, it has to show only the relevant.'

Answer 1

您可以向列添加筛选条件以检查小于或大于条件。如果您只想检查确切的日期字符串匹配，请使用以下作为过滤条件。

filter: {
          condition: uiGridConstants.filter.CONTAINS,
          placeholder: 'placeholder'
        },

这个plnkr显示了日期匹配的过滤条件

http://plnkr.co/edit/a9W4Gy7oUpdqieQjEw1A?p=preview

Answer 2

这对我有用，

{
                                            name : 'lLDate',
                                            field : 'lLDate',                                               
                                            displayName : 'LAST_LOGIN',                                             
                                            type : 'date',
                                            cellFilter : 'date:"dd-MMM-yy"',
                                            filterCellFiltered : 'true',
                                            width : '100',
                                            minWidth: '90',
                                            cellTemplate : '<div title="{{COL_FIELD | date:\'dd-MMM-yy\' }}">{{COL_FIELD | date:"dd-MMM-yy"  }}</div>',
                                            headerTooltip : true,
                                            cellClass : function(grid, row,
                                                    col, rowRenderIndex,
                                                    colRenderIndex) {
                                                return 'gridGroupCell';
                                            },
                                            headerCellFilter : 'translate',                                                 
                                        },

Answer 3

我创建了一个用于匹配日期的自定义过滤器函数并将其应用于 'condition' 字段，PFB 字段的 columnDef :

{ 
            name: 'orderDate',
            enablePinning: false,
            enableSorting: true,
            sort: { direction: 'asc' },
            width: "15%",
            displayName: 'Order Date',
            cellClass: 'pr25',
            filterCellFiltered:true,
            cellFilter: 'date:"yyyy-MM-dd"',
            filterHeaderTemplate: '<div class="ui-grid-filter-container" ng-repeat="colFilter in col.filters"><input type="date" class="ui-grid-filter-input" ng-model="colFilter.term" /></div>',
            filters:[
            { 
            filterName: "equalsTo",
            condition: function(searchTerm, cellValue) {
              var strippedValue = (cellValue + '').replace(/[^\d]/g, '-');
                var d1= new Date(strippedValue);
                var d2= new Date(searchTerm);
                return (
                    d1.getMonth() === d2.getMonth() &&
                    d1.getDate() === d2.getDate()
                 );
              },
            placeholder: 'equals'
          }]

        }

希望对您有所帮助。

angular ui 网格日期过滤器以搜索列中的日期

angular ui grid date filter to search the date in column

angularjs

date

angular-ui-grid

datefilter