Pass date range picker value to filter

Question

I am using daterangepicker to select the start and the end date.

This is my JsFiddle example

The date is working and I can select the start and the end date.

<input type="text" class="date" ng-model="selectDate" />

But how can I pass the selectDate model to the filters so that only those events will be selected where selectDate will match the eventStartDateTime

$scope.data=[{'eventStartDateTime': 'Tue, 02 April 2019, 12:30 PM','eventName': 'ANew Event','itemCreatedDateTime': '3/04/2019 5:17:10 AM',},{'eventStartDateTime': 'Tue, 02 April 2019, 02:43 PM','eventName': 'AFeatured Event 3','itemCreatedDateTime': '2/04/2019 1:54:10 AM',},{'eventStartDateTime': 'Tue, 02 April 2019, 12:30 PM','eventName': 'Event 9','itemCreatedDateTime': '2/04/2019 1:29:56 AM',},{'eventStartDateTime': 'Thu, 28 March 2019, 04:30 AM','eventName': 'Featured Event 2','itemCreatedDateTime': '28/03/2019 4:59:13 AM',},{'eventStartDateTime': 'Tue, 02 April 2019, 12:55 PM','eventName': 'Featured Event 4','itemCreatedDateTime': '28/03/2019 4:58:54 AM',},{'eventStartDateTime': 'Thu, 28 March 2019, 04:30 AM','eventName': 'Avent 5','itemCreatedDateTime': '28/03/2019 1:29:06 AM',},{'eventStartDateTime': 'Thu, 28 March 2019, 05:30 AM','eventName': 'Event 4','itemCreatedDateTime': '28/03/2019 1:29:00 AM',},{'eventStartDateTime': 'Fri, 29 March 2019, 04:00 AM','eventName': 'Event 3','itemCreatedDateTime': '28/03/2019 1:28:54 AM',},{'eventStartDateTime': 'Thu, 21 March 2019, 04:30 AM','eventName': 'Event 2','itemCreatedDateTime': '28/03/2019 1:28:41 AM',},{'eventStartDateTime': 'Thu, 28 March 2019, 04:00 AM','eventName': 'Event 1','itemCreatedDateTime': '28/03/2019 1:28:36 AM',}];

Any help or suggestion would be appreciated.

Thanks in advance

score 0 · Answer 1 · answered Apr 09 '19 at 13:07

0

add ng-onchange="filterfunction(dateModelInput)"

this will detect a change in your html,call your filter function. this will update your DOM.

make sure you include the filter into the html that needs the filtering.

<div>{{ctrl.data | filterResult }}</div>

answered Apr 09 '19 at 13:07

Tom Edwards

124
1
13

can you give me an example. Sorry i am new to angular – Owais Ahmed Apr 09 '19 at 13:12
i have given you the use cases for the code above. you just need to change "filterfunction" for your functions name. and whatever data your filtering you need to added the filter to it, i will make an edit onto a plunkr and hand it back if i get the time today. – Tom Edwards Apr 09 '19 at 13:14
what is the expected outcome for this ? to me it looks like it does filter out a single event – Tom Edwards Apr 09 '19 at 13:31

Fraction · Accepted Answer · 2019-04-10T09:16:37.847

You can use the Angular.js directive for daterangepicker

Install it then add daterangepicker to your angular.module and initialize your variables:

var app = angular.module("myApp", ["daterangepicker"]);
app.controller("myCtrl", function($scope, $window) {
  ...
  $scope.showFreeEvent = false;
  $scope.selectDate = { date: { startDate: null, endDate: null } };
  ...

Then in your HTML add attribute date-range-picker to any input and bind it to model:

<input
        date-range-picker
        class="form-control date-picker"
        type="text"
        ng-model="selectDate.date"
      />

And to filter your events you can use moment().isBefore() and moment().isAfter():

if (!$scope.showFreeEvent) {
      return true;
    }

    if (
      $scope.selectDate.date.startDate.isAfter(el.eventStartDateTime) ||
      $scope.selectDate.date.endDate.isBefore(el.eventStartDateTime)
    ) {
      return false;
    }

Demo: https://codesandbox.io/s/l29yqywx9m

Pass date range picker value to filter

2 Answers2