s.sathish kumar s.sathish kumar - 2 years ago 91
AngularJS Question

angular ui grid date filter to search the date in column

I wanted to search the date in my search column, using angular ui date filter.

When i try to search my date in the column, its not showing the correct date.
I want it to show the exact match of user search.
Example: If user types 22-aug-16, it should show only date matching to this date, suppose if users types 25-aug alone it should show only dates matching 25th august in any year that is present in the database.

I tried with my code like,

.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',
},


Here i also tried with

type: 'date'


And also added the onselect function which is mentioned in the same kind of question in stackoverflow.

Like,

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


Please help me in this, hope i explained my requirement. Kindly show some assistance for it.

This is the column field where i am doing the search,

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

Answer Source

This worked for me,

{
                                            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',                                                 
                                        },
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download