Передать значение выбора диапазона дат для фильтрации - PullRequest
Новая
       15

Передать значение выбора диапазона дат для фильтрации

1 голос
/ 09 апреля 2019

Я использую 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',}];

Любая помощь или предложение будут оценены.

Заранее спасибо

Ответы [ 2 ]

0 голосов
/ 09 апреля 2019

Вы можете использовать директиву 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

0 голосов
/ 09 апреля 2019

добавить ng-onchange="filterfunction(dateModelInput)"

это обнаружит изменение в вашем html, вызовет функцию фильтра. это обновит ваш DOM.

убедитесь, что вы включили фильтр в HTML, который нуждается в фильтрации. 

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