将日期范围选择器值传递给过滤器

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

你可以使用the Angular.js directive for 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;
    }

但是：ぁzxswい

Answer 2

添加https://codesandbox.io/s/l29yqywx9m

这将检测您的html中的更改，调用您的过滤器功能。这将更新您的DOM。

确保将过滤器包含在需要过滤的html中。

ng-onchange="filterfunction(dateModelInput)"