將日期范圍選擇器值傳遞給過濾器

Question

我正在使用daterangepicker選擇開始日期和結束日期。

這是我的JsFiddle示例

該日期有效，我可以選擇開始日期和結束日期。

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

但是如何將selectDate模型傳遞到過濾器，以便僅選擇selectDate與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',}];

任何幫助或建議，將不勝感激。

提前致謝

Answer 1

添加ng-onchange="filterfunction(dateModelInput)"

這將檢測到您的html中的更改，請調用您的過濾器功能。 這將更新您的DOM。

確保將過濾器包含在需要過濾的html中。

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

Answer 2

您可以將Angular.js指令用於daterangepicker

安裝它，然后將daterangepicker添加到您的angular.module並初始化變量：

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

然后在HTML中，將屬性date-range-picker添加到任何輸入，並將其綁定到模型：

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

為了過濾事件，您可以使用moment().isBefore()和moment().isAfter() ：

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

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

演示： https ： //codesandbox.io/s/l29yqywx9m