1

我正在使用 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',}];

任何帮助或建议将不胜感激。

提前致谢

4

2 回答 2

0

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

这将检测到您的 html 中的更改，调用您的过滤器函数。这将更新您的 DOM。

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

<div>{{ctrl.data | filterResult }}</div>
于 2019-04-09T13:07:05.507 回答
0

您可以将 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()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;
    }

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

于 2019-04-09T15:44:16.363 回答