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

您可以使用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;
    }

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

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

2 个答案: