javascriptangularjsdaterangepickerangular-daterangepicker

Pass date range picker value to filter


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


Solution

  • 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