对primeng表使用日期范围过滤器答案

【问题标题】：Using date range filter for primeng table对primeng表使用日期范围过滤器
【发布时间】：2021-02-03 09:38:33
【问题描述】：

我有以下代码用于在 PrimeNG 表中实现日期范围过滤器。

                    <th class="filter_header">
                      <p-calendar
                       
                        (onSelect)="historyTable.filter($event,'release_datetime', 'dateRangeFilter')"
                        placeholder="Search by release date"
                        [appendTo]="historyTable"
                        [(ngModel)]="rangeDates"
                      </p-calendar>
                    </th>

在组件中，我将FilterUtils 定义如下：

FilterUtils['dateRangeFilter'] = (value, filter): boolean => {
  if (filter === undefined || filter === null) {
    return true;
  }

  if (value === undefined || value === null) {
    return false;
  }
  console.log(value);
  if (this.rangeDates[0] <= value && this.rangeDates[1] >= value) {
    return true;
  }
}

但这不起作用。如果有人能指导我正确的方向，那将很有帮助。

我将value 视为未定义。我试过$event.target.value，但它也不起作用。

【问题讨论】：

标签： javascript angular typescript primeng date-range

【解决方案1】：

尝试更新您的日历，如下所示。您需要rangeDates 作为过滤器，而不是使用$event。

    <p-calendar
      [(ngModel)]="rangeDates"
      (onSelect)="historyTable.filter(rangeDates,'release_datetime', 'dateRangeFilter')"
      placeholder="Search by release date"
      [appendTo]="historyTable">
    </p-calendar>

【讨论】：