AngularJS datepicker to return snapshots

Question

Hello I am looking to provide a datepicker (material kit UI) that filters the date of the returned snapshots when I return a list of snapshot images on a page. However I get an injector error: angular.js:13920 Error: [$injector:unpr] Unknown provider: dayFilterFilterProvider <- dayFilterFilter http://errors.angularjs.org/1.5.8/$injector/unpr?p0=dayFilterFilterProvider%20%3C-NaNayFilterFilter

Here is the directive:

(function () {
    "use strict";
    app.controller("MainController", [
        "$rootScope",
        "$scope",
        function ($rootScope, $scope) {
            $scope.dayFilter = null;
            $scope.dayFilter = function(items, date) {
                return function(items, date) {
                    $rootScope.dateFilter = date;
                    var filtered = [];
                    var begin, end
                    begin = date.setHours(0, 0, 0);
                    end = date.setHours(23, 59, 59);
                    angular.forEach(items, function(item) {
                        if (item > begin && item < end) {
                            filtered.push(item)
                        }
                    })
                    console.log("Filtered day", date)
                    return filtered
                }
            };
                $scope.dayFilter(new Date(), 'date');

And here is the html:

<div class="dropdown">
        <h3 class="dropdown-toggle" id="day-datetimepicker" role="button" data-toggle="dropdown" data-target="#"> {{ filtered.date ? filtered.date.label : 'Day' }} <span class="caret"></span></h3>
        <ul class="dropdown-menu" role="menu" aria-labelledby="day-datetimepicker">
            <datetimepicker data-ng-model="dateFilter" data-datetimepicker-config="{
                dropdownSelector: '#day-datetimepicker',
                minView: 'day',
                startView: 'day'
            }" data-on-set-time="dayFilter(newDate, 'day')"></datetimepicker>
        </ul>
    </div>

    <a ng-repeat="s in chui.snapshot | dayFilter:'day' | orderBy:'-date'"

        ng-click="select('snapshot', s);
            modal('snapshot-keyholder', true);"
        class="snapshot-thumbnail col-xs-6 col-sm-4 col-md-3 col-lg-2"
    >

Let me know if you have any further questions. Many thanks in advance

In response to the first answer I created this module:

 app.filter("dayFilter",[
        function () {
            return function dayFilter(items,date) {
                var d = new Date();
                var filteredItems = [];
                var begin, end
                begin = d.setHours(0, 0, 0);
                end = d.setHours(23, 59, 59);
                angular.forEach(items, function(item) {
                    if (item > begin && item < end) {
                        filtered.push(item);
                    }
                })
                console.log("Filtered day", d);
                return filteredItems
            }
            $filter("dayFilter");
            // dayFilter(new Date(),'date');
        }]);


I no longer get an error, but the snapshots do not appear in the output, even though I get the following in the console:
iltered day Thu Nov 10 2016 23:59:59 GMT-0500 (COT)
main.js?v=2016-11-08-3:89 Filtered day Thu Nov 10 2016 23:59:59 GMT-0500 (COT)
main.js?v=2016-11-08-3:89 Filtered day Thu Nov 10 2016 23:59:59 GMT-0500 (COT)
main.js?v=2016-11-08-3:89 Filtered day Thu Nov 10 2016 23:59:59 GMT-0500 (COT)
main.js?v=2016-11-08-3:89 Filtered day Thu Nov 10 2016 23:59:59 GMT-0500 (COT)
main.js?v=2016-11-08-3:89 Filtered day Thu Nov 10 2016 23:59:59 GMT-0500 (COT)
main.js?v=2016-11-08-3:89 Filtered day Thu Nov 10 2016 23:59:59 GMT-0500 (COT)
main.js?v=2016-11-08-3:89 Filtered day Thu Nov 10 2016 23:59:59 GMT-0500 (COT)
main.js?v=2016-11-08-3:89 Filtered day Thu Nov 10 2016 23:59:59 GMT-0500 (COT)

Oh in the post I realise I didn't close the curly brackets in the jabascript, and the first div in the html, but in the script they are closed (when I copied them over there are other directives and parts of the script that are not relevant to this part, and so I closed the parts after them. — Will Bodansky
$scope isn't injectable into filter functions. A $scope is only injectable into controllers that are instantiated by the ng-controller directive or custom directives. — georgeawg
that helped and i've made further edits...is it possible from the info I've given (please see edits at the end of the question) to see why I'm not getting the output that's desired? — Will Bodansky

georgeawg georgeawg · Accepted Answer · 2016-11-10T20:21:57

The template is using dayFilter in the ng-repeat directive. To add a filter to the module, use the module.filter method:

app.filter("dayFilter", () => {
   return function dayFilter(items, date) {
       //filter code
       return filteredItems;
   };
});

To instantiate the filter in the controller, use the $filter service:

$filter("dayFilter");

For more information, see AngularJS Developer Guide -- Creating Custom FIlters

AngularJS datepicker to return snapshots

1 Answers