angularjs ng-repeat with date range

Question

I'm trying to filter a list that contains only the entries in a range of dates with die ui-bootstrap datepicker:

When I load the page first time the filter works fine but when I change the dates in the datepickers no entry will be shown. How can I pass the data through the filter with the new date ranges?

My custom filter:

angular.module('reklaApp')
.filter('dateFilter', function () {
return function (items, fromDate, toDate) {

    var filtered = [];

    for (var i = 0; i < items.length; i++) {

        var item = items[i];

        if (item.dt > fromDate && item.dt < toDate){
            filtered.push(item);
        }
    }

    return filtered;
};
});

my Model:

var ReklaSchema = new Schema({
 dt: Date,
 order: Number,
});

my View:

    <div class="form-group">
      <span class="input-group">
        <input type="text" class="form-control" datepicker-popup="dd.MM.yyyy" ng-model="fromDate" is-open="datepickers.fromDate" min-date="" max-date="maxDate" 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,'fromDate')"><i class="glyphicon glyphicon-calendar"></i></button>
        </span>
      </span>
    </div>
    &nbsp;bis&nbsp;
    <div class="form-group">
      <span class="input-group">
        <input type="text" class="form-control" datepicker-popup="dd.MM.yyyy" ng-model="toDate" is-open="datepickers.toDate" min-date="" max-date="maxDate" 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,'toDate')"><i class="glyphicon glyphicon-calendar"></i></button>
        </span>
      </span>
    </div>

my View for the Filter:

    <tr ng-repeat="rekla in reklas | dateFilter:fromDate:toDate">
      <td>{{rekla.dt | date: 'dd.MM.yyyy'}}</td>
      <td>{{rekla.order}}</td>
    </tr>

my Controller:

angular.module('reklaApp')
 .controller('MainCtrl', function ($scope, $http, Reklas, Modal) {

    $scope.newRekla = {};
    $scope.reklas = {};

    $scope.fromDate = '2015-03-31T22:00:00.000Z';
    $scope.toDate = '2015-04-30T22:00:00.000Z';

    Reklas.getAll()
      .success(function(data) {
        $scope.reklas = data;
    });

UPDATE:

I think the problem is the data type of the datepicker!?

Datepicker Data:

enter image description here

Model Data:

enter image description here

where you ha applied the filter ,post that html code also. And if possible provide fiddle or pluker — Anita
– Anita, Commented Apr 22, 2015 at 6:56
I think the filter works but I have problem with the datepicker data which will be convert to a string when i change this one! — larz
– larz, Commented Apr 22, 2015 at 8:16

Satyam Koyani · Accepted Answer · 2015-04-22 06:59:41Z

1

Call ng-change function in datepicker and apply filter again in ng-change function or else put watch on date variables and in watch function apply filter again.

answered Apr 22, 2015 at 6:59

Satyam Koyani

4,2842 gold badges25 silver badges49 bronze badges

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

Comments

Anita · Accepted Answer · 2015-04-22 08:54:19Z

0

you can call filter on ng-change and apply the filter on th model like this:

<input type="text" class="form-control" datepicker-popup="dd.MM.yyyy" ng-model="toDate" is-open="datepickers.toDate" min-date="" max-date="maxDate" date-disabled="disabled(date, mode)" ng-required="true" ng-change="filterDate()" close-text="Close" />

and in controller js create method filterDate() like this:

$scope.filterDate=function(){
    $scope.toDate=$filter('dateFilter')($scope.toDate);
}

answered Apr 22, 2015 at 8:54

Anita

2,4102 gold badges21 silver badges30 bronze badges

1 Comment

larz Over a year ago

I think the filter is working and the problem is the data type from the "datepicker"...I add an image in my post to see what I mean.

Collectives™ on Stack Overflow

angularjs ng-repeat with date range

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related