Search code examples
angularjsdatepickerangularjs-filter

Angularjs filter ng-repeat by datepicker


Can someone help me to filter my ng-repeat using datepicker?, I'm not that expert when it comes to these and I'm still in the learning process. I really appreciate your help. Thank you.

here is my html:

<form style=" text-align: center;">  
    <div class="row">
            <div class="col-xs-6">
                <p class="input-group">
                  <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" datepicker-options="dateOptions" 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>
            </div>
        </div>

    </form>

        <div class="col-lg-6"  name="in">
            <label>Time In</label>
              <div ng-init="getTime()">
                <div ng-repeat="item in items | filter: date_picker">

                {{item.last_name}}
                {{item.first_name}}
                <input type="checkbox"/> <img src="{{item.pic}}" width="100" height="100"><br>
                {{item.time_only}}
                {{item.date_only}} <br><br>
              </div>
            </div>
        </div>

My controller:

function ($scope, $http, $filter, $timeout, $resource, ngTableParams, $modal, time) {


      $scope.items=[];


       $scope.today = function() {
          $scope.dt = new Date();
        };
        $scope.today();

        $scope.clear = function () {
          $scope.dt = null;
        };

        $scope.toggleMin = function() {
          $scope.minDate = $scope.minDate ? null : new Date();
        };
        $scope.toggleMin();

        $scope.open = function($event) {
          $event.preventDefault();
          $event.stopPropagation();

          $scope.opened = true;
        };

        $scope.dateOptions = {
          formatYear: 'yy',
          startingDay: 1
        };

        $scope.formats = [ 'yyyy/MM/dd','dd-MMMM-yyyy', 'dd.MM.yyyy', 'shortDate'];
        $scope.format = $scope.formats[0];




        $scope.getTime = function(){
              time.getTime()
              .success(function(data) {console.log(data);
                    $scope.items = data.items;

                   })
                     .error(function(data, status, headers, config) {
                               console.log('error!');
                   });
        };

Solution

  • Change your code from

    <div ng-repeat="item in items | filter: date_picker">
    

    to

    <div ng-repeat="item in items | filter: {date_only:dt}">
    

    Assuming that ng-model=dt is your search criteria and property searched against is item.date_only and also both above object has same type ( comparable ).

    More info check https://docs.angularjs.org/api/ng/filter/filter