Kendo ui Angular 2日期过滤器介于2个特定日期之间

Question

我在kendo Ui grid angular 2集成组件上创建日期过滤器时遇到问题。问题是我想在两个特定日期之间过滤日期列，我指的是日期范围。我搜索了剑道和Stackoverflow的论坛，但我还没有找到任何东西。那么在剑道ui网格角度2组件的两个日期之间过滤日期列的任何人都有相同的经验。如果你能就这个问题做一个例子我真的很感激。感谢大家。

Answer 1

很高兴看到您的代码确切地确定您的具体案例的答案。

无论如何，我为我的雇主创建了一个网格，其中包含您想要的功能以及开箱即用的kendo组件。我的项目是使用angular 4，typescript 2.9和带有OData v4的WEB API。

我具体案例中唯一的解决方法是处理时间戳。在这个答案的时候，Kendo网格不能很好地利用午夜以外的时间戳。

这是component.html：**请注意，在日期列中设置filterable="menu"标签和kendo-grid上的filter="date"是根据kendo's docs设置日期过滤的一种官方方式。然后你可以使用format=""来设置你想要的日期格式

<kendo-grid [filter]="GridState.filter" filterable="menu" (filterChange)="filterChange($event)" [data]="gridData(list)" [pageSize]="GridState.take"
        (dataStateChange)="onStateChange($event)" [skip]="GridState.skip" [sort]="GridState.sort" [sortable]="true" [pageable]="true"
        (sortChange)="sortChange($event)" [scrollable]="'none'">
    <kendo-grid-column field="ReturnStatusDisplay" title="Status" width="columnWidth">
    </kendo-grid-column>
    <kendo-grid-column field="Preparer.Id" title="Preparer Id" width="columnWidth" filter="numeric" format="{0:d}">
    </kendo-grid-column>
    <kendo-grid-column field="ReceivedDate" title="Received Date" width="columnWidth" filter="date" format="{0:MM/dd/yyyy}">
    </kendo-grid-column>
    <kendo-grid-column field="AdmCreatedDate" title="Processed Date" width="columnWidth" filter="date" format="{0:MM/dd/yyyy}">
    </kendo-grid-column>
  </kendo-grid>

为了正确处理时间戳，我在typescript上创建了一个方法，将所有时间戳设置为最近的午夜

public setTimestampToNearestMidnight(entitySet: any[], dateProperty): any[] {
    entitySet.forEach(e => {
      let dateWithNearestMidnight = new Date(e[dateProperty]).setHours(0,0,0,0);

      e[dateProperty] = new Date(dateWithNearestMidnight);
    })

    return entitySet;
  }

然后将其应用于我需要显示的对象列表

public get ReturnsList$(): Observable<Return[]> {
    let processedReturnsList: Return[] = this._accountManagementService._companyFolio.Returns;
    processedReturnsList = this._commonService.setTimestampToNearestMidnight(processedReturnsList, ReturnDateProperties.ADM_CREATED_DATE);
    processedReturnsList = this._commonService.setTimestampToNearestMidnight(processedReturnsList, ReturnDateProperties.RECEIVED_DATE);
    processedReturnsList = this.concatenateReturnTypeAndDescription(processedReturnsList);

    return Observable.of(processedReturnsList);
  }

请注意我使用observable作为网格数据，然后使用异步管道从HTML订阅。如果时间戳和可观察量不适用于您，您可以忽略setTimestampToNearestMidnight()和ReturnsList$()部分。

正如您在下面的屏幕截图中看到的，您可以使用菜单上的AND运算符选择一系列日期;在这种情况下，在07/31/2018 - 08/29/2018之间是所选范围。

我希望这有帮助！

Answer 2

我正在使用Kendo UI Grid for Angular。 Angular版本是5使用TypeScript。

主要问题是网格将日期呈现为字符串，并且当应用日期过滤器时，它会尝试将字符串类型与日常不兼容的日期类型进行比较。

为了避免这个问题，我使用moment.js库，它可以将字符串转换为日期格式，或者使用日期转换为字符串格式，以便在两者之间进行比较。

确保在项目中正确引用了momentjs。将其添加到component.ts（在类导出之外，因为以下是纯javascript代码）。

class Range {
  from: Date;
  to: Date;
}

// Custom Filter Operator: isWithin

function isWithin(columnValue: Date, range: Range): boolean {
  if (columnValue) {
    return moment(columnValue).isBetween(moment(range.from), moment(range.to), 'minute', '[]');
  } else {
    return false;
  }
}

以下是component.ts中的typescript代码，它基本上将自定义过滤器添加到Kendo Grid的过滤器中。每当更新日期选择器中的值时，都会调用onMinDateChange和onMaxDateChange函数（请参阅component.html的代码），并自动更新过滤器。

  public onMinDateChange(value: Date): void {
    this.filterDateRange(value, this.filterValueDateMax);
  }

  public onMaxDateChange(value: Date): void {
    this.filterDateRange(this.filterValueDateMin, value);
  }

  public filterDateRange(min, max): void {
    this.filter.filters = [];

    if (min && max) {
      this.filter.filters.push({
        field: this.field,
        operator: isWithin,
        value: { from: min, to: max }
      });
    }
  }

通过在component.ts中添加此行来输入过滤器：

  @Input() public filter: CompositeFilterDescriptor;

日期时间选择器（如果需要，您可以只使用日期选择器）在component.html中定义如下：

  <div class="row">
    <kendo-datepicker [(value)]="filterValueDateMin" [format]="'MM/dd/yyyy HH:mm:ss'" (valueChange)="onMinDateChange($event)"> </kendo-datepicker>
    <kendo-timepicker [(value)]="filterValueDateMin" (valueChange)="onMinDateChange($event)"> </kendo-timepicker>
    </div>
  <div class="row">
    <kendo-datepicker [(value)]="filterValueDateMax" [format]="'MM/dd/yyyy HH:mm:ss'" (valueChange)="onMaxDateChange($event)"> </kendo-datepicker>
    <kendo-timepicker [(value)]="filterValueDateMax" (valueChange)="onMaxDateChange($event)"> </kendo-timepicker>
  </div>

最后，这是我在主网格的html中使用过滤器的方式：

 <ng-template kendoGridFilterMenuTemplate *ngIf="col.fieldName === 'insertFieldNameHere'"
                   let-filter="filter"
                   let-column="column"
                   let-filterService="filterService">
        <app-date-time-range-filter [headerTitle]="col.displayName"
                                    [filter]="filter"
                                    [field]="column.field">
        </app-date-time-range-filter>
      </ng-template>

希望这可以帮助。