Фильтр по дате в сетке пользовательского интерфейса кендо показывает пустой диалог для переключения календаря

Я новичок с угловым 5 и кендо ui для углового. Я следую примеру в https://www.telerik.com/kendo-angular-ui/components/grid/data-operations/filtering/, чтобы понять основы фильтрации данных в сетке. Проблема в том, что если я хочу отфильтровать по столбцу Дата первого заказа (который содержит дату) и нажимаю кнопку календаря, отображается пустой диалог, и я не могу выбрать дату.

это app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { GridModule } from '@progress/kendo-angular-grid';
import { AppComponent } from './app.component';

@NgModule({
   bootstrap:    [AppComponent],
   declarations: [AppComponent],
   imports:      [BrowserModule, BrowserAnimationsModule, GridModule]
})
export class AppModule {
}

это json, содержащий мои данные

export const sampleProducts = [
    {
        "ProductID": 1,
        "ProductName": "Chai",
        "SupplierID": 1,
        "CategoryID": 1,
        "QuantityPerUnit": "10 boxes x 20 bags",
        "UnitPrice": 18,
        "UnitsInStock": 39,
        "UnitsOnOrder": 0,
        "ReorderLevel": 10,
        "Discontinued": false,
        "Category": {
            "CategoryID": 1,
            "CategoryName": "Beverages",
            "Description": "Soft drinks, coffees, teas, beers, and ales"
        },
        "FirstOrderedOn": new Date(1996, 8, 20)
    },
    {
        "ProductID": 2,
        "ProductName": "Chang",
        "SupplierID": 1,
        "CategoryID": 1,
        "QuantityPerUnit": "24 - 12 oz bottles",
        "UnitPrice": 19,
        "UnitsInStock": 17,
        "UnitsOnOrder": 40,
        "ReorderLevel": 25,
        "Discontinued": false,
        "Category": {
            "CategoryID": 1,
            "CategoryName": "Beverages",
            "Description": "Soft drinks, coffees, teas, beers, and ales"
        },
        "FirstOrderedOn": new Date(1996, 7, 12)
   }
]

это app.component.html

<kendo-grid
[data]="gridData"
[pageSize]="state.take"
[skip]="state.skip"
[sort]="state.sort"
[filter]="state.filter"
[sortable]="true"
[pageable]="true"
[filterable]="true"
(dataStateChange)="dataStateChange($event)"
>
<kendo-grid-column field="ProductID" title="ID" width="40" [filterable]="false">
</kendo-grid-column>
<kendo-grid-column field="ProductName" title="Product Name">
</kendo-grid-column>
<kendo-grid-column field="FirstOrderedOn" title="First Ordered On" width="240" filter="date" format="{0:d}">
</kendo-grid-column>
<kendo-grid-column field="UnitPrice" title="Unit Price" width="180" filter="numeric" format="{0:c}">
</kendo-grid-column>
<kendo-grid-column field="Discontinued" width="120" filter="boolean">
<ng-template kendoGridCellTemplate let-dataItem>
    <input type="checkbox" [checked]="dataItem.Discontinued" disabled/>
</ng-template>
</kendo-grid-column>
</kendo-grid>

это app.component.ts

import { Component } from '@angular/core';
import { process, State } from '@progress/kendo-data-query';
import { sampleProducts } from "./products";

import {
    GridComponent,
    GridDataResult,
    DataStateChangeEvent
} from '@progress/kendo-angular-grid';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
      private state: State = {
        skip: 0,
        take: 5,

        // Initial filter descriptor
        filter: {
          logic: "and",
          filters: [{ field: "ProductName", operator: "contains", value: "Chef" }]
        }
    };

    private gridData: GridDataResult = process(sampleProducts, this.state);

    protected dataStateChange(state: DataStateChangeEvent): void {
        this.state = state;
        this.gridData = process(sampleProducts, this.state);
    }
}