Question

我想使用角度ui日期过滤器在搜索栏中搜索日期。

当我尝试在列中搜索我的日期时，它没有显示正确的日期。我希望它显示用户搜索的完全匹配。示例：如果用户键入22-aug-16，则它应仅显示与此日期匹配的日期，假设用户单独键入25-aug，则应仅显示与数据库中存在的任何年份中的第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'

并且还添加了onselect函数，该函数在stackoverflow中的同一类问题中提到。

像，

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

请帮助我，希望我解释了我的要求。请给它一些帮助。

这是我正在进行搜索的列字段

Here i want to search my required date, it has to show only the relevant.＆＃39;

Answer 1

这对我有用，

{
                                            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 2

我创建了一个用于匹配日期的自定义过滤器函数，并将其应用于'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'
          }]

        }

希望这有帮助。

Answer 3

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

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

此plnkr显示日期匹配的过滤条件

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

角度ui网格日期过滤器，用于搜索

3 个答案: