Angular JS filter by date not working

Question

I'm trying to filter the data in a table so that it only shows me the items entered on a certain date, but I can't seem to get this working. I can see the model being updated when I select a new date, but the data in the table doesn't change.

HTML:

 <tr ng-repeat='file in files  | filter: date '>

Datepicker HTML:

<label>From:</label> 
  <p class="input-group" style="width:200px">
    <input type="text" class="form-control" uib-datepicker-popup = "{{format}}" ng-model="date" is-open="status.opened"
                                       min-date="minDate" max-date="maxDate" datepicker-options="dateOptions" date-disabled="disabled(date, mode)"
                                       ng-required="true" close-text="Close"/>
        <span class="input-group-btn">
          <button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
        </span>
  </p>

Controller:

(function ()
 {
  'use strict';

 angular.module('aml-tech-dashboard.successful-emails').controller('datepickerController', function ($scope) {
$scope.date = '';
$scope.status = {
    opened: false
};

$scope.format = "yyyy-MM-dd"
$scope.minDate = new Date();
$scope.dateOptions = {
    //formatYear: 'yy',
    startingDay: 1
};

$scope.open = function ($event) {
    $scope.status.opened = true;

};

$scope.date = new Date();

});

})();

Your list items must have different date than the picked date even if we're talking about hour or minutes — Leonardo Lana, Aug 01 '16 at 14:13
if they have a different date, shouldn't everything just disappear from the table when I select a date? — Andreea, Aug 01 '16 at 14:14
this may help you, a similar question:http://stackoverflow.com/questions/25515431/ng-repeat-filtering-data-by-date-range — Duly Kinsky, Aug 01 '16 at 14:14
@terpinmd yeah, it works if I hardcode the value I want to filter by — Andreea, Aug 01 '16 at 14:19

Kirill Matrosov · Answer 1 · 2016-08-01T14:34:05.607

0

You should use object for filtering.

<tr ng-repeat='file in files  | filter: date '>

$scope.date = {date: '2016-08-01'}

And every 'file' must have field 'date'

edited Aug 01 '16 at 14:34

answered Aug 01 '16 at 14:16

Kirill Matrosov

5,564
4
28
39

score 0 · Accepted Answer · answered Aug 01 '16 at 15:53

So I figured out the problem. The files were in a JSON format and the date from the datepicker was a Date object.

I added a listener to the controller that converts the new date to JSON and this fixed it for me:

 $scope.$watch("date", function(newval, oldval) {
        $scope.dateString = $scope.date.toJSON();
    });

(and filtered using the new dateString value)

Angular JS filter by date not working

2 Answers2