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

2 回答

• 1

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

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

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

  这是component.html：**请注意，在 kendo-grid 标记上设置 filterable="menu" 并在日期列中设置 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之间是所选范围 .

  

  我希望这有帮助！

  回复于 2024-04-26T07:31:55+08:00
• 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>
  

  希望这可以帮助 .

  回复于 2024-04-26T07:31:55+08:00