CODEWITHSUNDEEP
angularjsdatefilterdatepickeruidatepicker
larz
larz

Reputation: 871

angularjs ng-repeat with date range

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

Upvotes: 0

Views: 2916

Answers (2)

Anita
Anita

Reputation: 2400

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);
}

Upvotes: 0

Satyam Koyani
Satyam Koyani

Reputation: 4274

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.

Upvotes: 1

Related Questions