AngularJS filtering on a formatted date

Question

I have a table generated with like so:

<tr data-ng-repeat="employee in employees | filter: employeeSearch">
    <td>{{employee.lastName}}</td>
    <td>{{employee.firstName}}</td>
    <td>{{employee.hireDate | date: format : mediumDate}}</td>
    <td>{{employee.phone | phone}}</td>
    <td>{{employee.email}}</td>
</tr>

I'm using a text box to filter the table

<input type="text" id="employeeSearch" placeholder="Search employees" data-ng-model="employeeSearch" />

The dates are formatted like Jun 15, 2015 but since they're stored as a date object before getting formatted as a mediumDate I have to type 2015-06-15 to filter to that date. Is there some way to specify that I want my employeeSearch input to filter on displayed values instead of stored values?

I tried modifying the date object in my query function to no avail.

It's the <input> line above. It's just a text box and it's filtering any of the columns. — ajthyng
– ajthyng, Commented Apr 27, 2016 at 2:05

Anik Islam Abhi · Accepted Answer · 2016-04-27 03:07:03Z

4

Create a method in controller

$scope.filter=function(obj){
 return match(obj.lastName) || match(obj.firstName) || (new Date($scope.employeeSearch)) == (new Date(obj.hireDate)) || match(obj.phone) || match(obj.email)
}
function match(value){
 return value.toLowerCase().indexOf($scope.employeeSearch.toLowerCase()) > -1;
}

Add this method to view

<tr data-ng-repeat="employee in employees | filter: filter">

edited Apr 27, 2016 at 3:07

answered Apr 27, 2016 at 2:53

Anik Islam Abhi

25.4k8 gold badges61 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Quill Over a year ago

There's better ways to write that than a massive long line of code... ;-;

Anik Islam Abhi Over a year ago

@Quill Please feel free to share :)

Quill Over a year ago

You can create a function to simplify those $scope.employeeSearch parts

Collectives™ on Stack Overflow

AngularJS filtering on a formatted date

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related