Передать значение выбора диапазона дат в фильтр
Я использую 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',}];
Любая помощь или предложение будут оценены.
заранее спасибо
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
добавить ng-onchange = "filterfunction(dateModelInput)"
это обнаружит изменение в вашем html, вызовите функцию фильтра. это обновит ваш DOM.
убедитесь, что вы включили фильтр в html, который нуждается в фильтрации.
<div>{{ctrl.data | filterResult }}</div>
я дал вам варианты использования кода выше. вам просто нужно изменить «filterfunction» на имя вашей функции. и любые данные, которые вы фильтруете, вам нужно добавить к ним фильтр, я внесу изменения в plunkr и верну его, если у меня будет время сегодня.
каков ожидаемый результат для этого? мне кажется, что он отфильтровывает одно событие
Вы можете использовать директива 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;
}
Можете ли вы привести пример? Извините, я новичок в angular