Filter ng-repeat by input date

Question

I'm currently working on one of my first angularJS projects and I'm stuck. So what am I trying to do?

I'm trying to filter my ng-repeat with a selected date from an input type = date this is my view:

<div class="form-group col-md-3">
    <label for="date">Tender Date</label>
    <input type="date" id="date" ng- model="searchDate.TenderDate"class="form-control">
</div>

<div >
    <table class="table table-bordered">

        <thead>

            <th>Tender ID</th>
            <th>Business unit</th>
            <th>Therapy Unit</th>
            <th>Tender Date</th>

        </thead>
        <tbody ng-repeat="tender in tenders | filter:searchDate">
            <td>{{tender.TenderID}}</td>
            <td>{{tender.businessUnit}}</td>
            <td>{{tender.therapyUnit}}</td>

            <td>{{tender.TenderDate}}</td>
        </tbody>

    </table>


</div>

This is my json file:

{
"Tenders":[{
            "businessUnit": "GN_RE S-RETAIL",
            "therapyUnit" : "Hospital Product ",
            "TenderID" : "BE_13_N2.1_001",
            "TenderDate" : "2016-03-17"
            },

            {
                "businessUnit": "GN_RE S-RETAIL",
                "therapyUnit" : "Hospital Product ",
                "TenderID" : "BE_13_N2.1_01",
                "TenderDate" : "2016-03-18"
            }


            ]
}

I have nothing in my controller. I am able to link a searchfield to a to a particular field in my array but the problem is the date type isn't working. I hope you guys can help me!

Possible duplicate of [ng-repeat :filter by single field](http://stackoverflow.com/questions/14733136/ng-repeat-filter-by-single-field) — Ralf de Kleine, Mar 17 '16 at 11:03
Nope, I am able to filter an input type = text I'm just having problems with the date — Sander Van Keer, Mar 17 '16 at 11:05
Look at the second answer in the link. It states you should use 'filter: {TenderDate: searchdate}' — Ralf de Kleine, Mar 17 '16 at 11:21

Hadi J · Accepted Answer · 2016-03-17T12:24:53.903

try this.

var myapp = angular.module('app', []);
myapp.controller('Main', function ($scope) {
  $scope.tenders = {
"Tenders":[{
            "businessUnit": "GN_RE S-RETAIL",
            "therapyUnit" : "Hospital Product ",
            "TenderID" : "BE_13_N2.1_001",
            "TenderDate" : "2016-03-17"
            },

            {
                "businessUnit": "GN_RE S-RETAIL",
                "therapyUnit" : "Hospital Product ",
                "TenderID" : "BE_13_N2.1_01",
                "TenderDate" : "2016-03-18"
            }


            ]
};
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app = "app">
  <div ng-controller="Main">
    <div class="form-group col-md-3">
    <label for="date">Tender Date</label>
    <input type="date" id="date" ng-model="searchDate"class="form-control">
</div>

<div >
    <table class="table table-bordered">

        <thead>

            <th>Tender ID</th>
            <th>Business unit</th>
            <th>Therapy Unit</th>
            <th>Tender Date</th>

        </thead>
        <tbody ng-repeat="tender in tenders.Tenders | filter: {TenderDate: searchDate }">
            <td>{{tender.TenderID}}</td>
            <td>{{tender.businessUnit}}</td>
            <td>{{tender.therapyUnit}}</td>

            <td>{{tender.TenderDate}}</td>
        </tbody>

    </table>


</div>
   </div>
</div>

Yes but it does not work in my app for some reason. I dont use a function, like your main-function, but I load my data from a json-only file — Sander Van Keer, Mar 17 '16 at 12:19

score 1 · Answer 2 · answered Mar 17 '16 at 11:17

1

You must mention by which column your filter will work

filter:{TenderDate:searchDate}

answered Mar 17 '16 at 11:17

Hassan Tariq

730
7
15

change your "ng- model="searchDate.TenderDate" to searchDate – Hassan Tariq Mar 17 '16 at 11:45
I allready tried this and if I choose 17/03/2016 the table is just empty. – Sander Van Keer Mar 17 '16 at 11:52
I cant because it is a datepicker – Sander Van Keer Mar 17 '16 at 11:59
actually it is matching date with format and your input format is different – Hassan Tariq Mar 17 '16 at 12:01

Filter ng-repeat by input date

2 Answers2