Question

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

Answer 1

很高兴看到您的代码来确定确切的解决方案。

无论如何，我为开箱即用的剑道组件创建了一个具有所需功能的雇主网格。我的项目使用的是角度4，打字稿2.9和带有OData v4的WEB API。

在我的特定情况下，唯一的解决方法是处理时间戳。在回答此问题时，剑道网格在除午夜以外的其他时间戳上不能很好地发挥作用。

这是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>

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

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);
  }

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

如下面的屏幕快照所示，可以使用菜单上的AND运算符选择日期范围；在这种情况下，则选择范围为07/31/2018-08/29/2018。

我希望这会有所帮助！

Answer 2

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

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

为避免此问题，我使用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中的打字稿代码，该代码基本上将自定义过滤器添加到Kendo Grid的过滤器中。每当更新日期选择器中的值（请参阅component.html的代码）并自动更新过滤器时，都会调用onMinDateChange和onMaxDateChange函数。

  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>

希望这会有所帮助。

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

2 个答案: