Kendo ui 有没有办法为剑道网格的日期列定义最大和最小日期？

我有一个剑道网格，带有单元格内编辑和一对日期列。我想为用户正在编辑的单元格中的日期选择器指定一个最大日期和一个最小日期，但它似乎不存在任何属性

我试着用模板来做：

但是我犯了很多错误。我怎样才能做到这一点

编辑：我根据文档中的一个单元格内编辑示例创建了一个stackblitz示例：

在这里，我发现我没有指定ngModel必须连接到的属性：

[(ngModel)]="dataItem"

应该是：

[(ngModel)]="dataItem.Date"

好的，我更改了它，但是现在，当我单击日期单元格时，它不再显示为日期选择器，而是显示为常规输入。请在组件模板中检查此部分，问题在于：

{{dataItem.Date}

我做错了什么

---

编辑II:到目前为止，所有解决方案都显示单元格内的日期选择器。没关系，我知道怎么做。问题是，在用户单击编辑单元格之前，该单元格必须像标签一样，当用户单击该标签时，它必须成为日期选择器。如果用户更改了日期并点击离开，网格必须知道数据已经更新，并按照相应的方式操作。总之，我需要保留单元格内编辑行为。

要设置日期选择器的最小值和最大值，请使用

[min]

和

[max]

。有关示例，请参见。

要设置日期选择器的最小值和最大值，请使用

[min]

和

[max]

。请参阅以获取示例。

以下是一个示例代码，可满足您的要求：

@Component({
   selector: 'my-app',
   template: `
       <p>Date</p>
       <kendo-grid [data]="gridData">
        <kendo-grid-column field="ProductID"></kendo-grid-column>
        <kendo-grid-column field="ProductName"></kendo-grid-column>
        <kendo-grid-column field="date" [format]="{ date: 'long' }">
            <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
                <kendo-datepicker [(value)]="dataItem.date" [min]="minDate" [max]="maxDate">

                </kendo-datepicker>
            </ng-template>
        </kendo-grid-column>
       </kendo-grid>
   `
})
export class AppComponent {
    public minDate = new Date(2018, 4, 1);
    public maxDate = new Date(2018, 4, 31);

    const products = [{
       "ProductID": 1,
       "ProductName": "Chai",
       "UnitPrice": 18.0000,
       "Discontinued": true,
       date: new Date("2018-05-05T00:00:00-05:00")
     }, {
       "ProductID": 2,
       "ProductName": "Chang",
       "UnitPrice": 19.0000,
       "Discontinued": false,
       date: new Date("2018-05-07T00:00:00-05:00")
     }
    ];

    public gridData: any[] = products.map(item => {
      item.date = new Date(item.date);
      return item;
    });
}

@组件({
选择器：“我的应用程序”，
模板：`
日期

`
})
导出类AppComponent{
公众意识=新日期（2018年4月1日）；
公共最大日期=新日期（2018年4月31日）；
常数乘积=[{
“ProductID”：1，
“产品名称”：“Chai”，
“单价”：18.0000，
“中止”：正确，
日期：新日期（“2018-05-05T00:00:00-05:00”）
}, {
“ProductID”：2，
“产品名称”：“Chang”，
“单价”：19.0000，
“中止”：错误，
日期：新日期（“2018-05-07T00:00:00-05:00”）
}
];
公共网格数据：任意[]=products.map（项=>{
item.date=新日期（item.date）；
退货项目；
});
}

下面是一个示例代码，可以满足您的要求：

@Component({
   selector: 'my-app',
   template: `
       <p>Date</p>
       <kendo-grid [data]="gridData">
        <kendo-grid-column field="ProductID"></kendo-grid-column>
        <kendo-grid-column field="ProductName"></kendo-grid-column>
        <kendo-grid-column field="date" [format]="{ date: 'long' }">
            <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
                <kendo-datepicker [(value)]="dataItem.date" [min]="minDate" [max]="maxDate">

                </kendo-datepicker>
            </ng-template>
        </kendo-grid-column>
       </kendo-grid>
   `
})
export class AppComponent {
    public minDate = new Date(2018, 4, 1);
    public maxDate = new Date(2018, 4, 31);

    const products = [{
       "ProductID": 1,
       "ProductName": "Chai",
       "UnitPrice": 18.0000,
       "Discontinued": true,
       date: new Date("2018-05-05T00:00:00-05:00")
     }, {
       "ProductID": 2,
       "ProductName": "Chang",
       "UnitPrice": 19.0000,
       "Discontinued": false,
       date: new Date("2018-05-07T00:00:00-05:00")
     }
    ];

    public gridData: any[] = products.map(item => {
      item.date = new Date(item.date);
      return item;
    });
}

@组件({
选择器：“我的应用程序”，
模板：`
日期

`
})
导出类AppComponent{
公众意识=新日期（2018年4月1日）；
公共最大日期=新日期（2018年4月31日）；
常数乘积=[{
“ProductID”：1，
“产品名称”：“Chai”，
“单价”：18.0000，
“中止”：正确，
日期：新日期（“2018-05-05T00:00:00-05:00”）
}, {
“ProductID”：2，
“产品名称”：“Chang”，
“单价”：19.0000，
“中止”：错误，
日期：新日期（“2018-05-07T00:00:00-05:00”）
}
];
公共网格数据：任意[]=products.map（项=>{
item.date=新日期（item.date）；
退货项目；
});
}

您需要使用最小和最大日期选择器属性。有关日期选择器最小-最大示例，请参阅。 有关日期选择器列模板的示例，请参阅

 @Component({
  selector: 'my-app',
  template: `
      <form novalidate #myForm="ngForm">
          <kendo-grid
              [data]="view | async"
              [height]="533"
              [pageSize]="gridState.take" [skip]="gridState.skip" [sort]="gridState.sort"
              [pageable]="true" [sortable]="true"
              (dataStateChange)="onStateChange($event)"
              (edit)="editHandler($event)" (cancel)="cancelHandler($event)"
              (save)="saveHandler($event)" (remove)="removeHandler($event)"
              (add)="addHandler($event)"
              [navigable]="true"
            >
            <ng-template kendoGridToolbarTemplate>
                <button kendoGridAddCommand type="button">Add new</button>
            </ng-template>
            <kendo-grid-column field="ProductName" title="Product Name">
                <ng-template kendoGridEditTemplate let-dataItem="dataItem">
                    <input [(ngModel)]="dataItem.ProductName" kendoGridFocusable name="ProductName" class="k-textbox" required/>
                </ng-template>
            </kendo-grid-column>
            <kendo-grid-column field="date" title="Date" format="{0:yyyy-MM-dd}">
                <ng-template kendoGridEditTemplate let-dataItem="dataItem">
                    <kendo-datepicker  
                    [format]="'yyyy-MM-dd'" 
                    [(ngModel)]="dataItem.date" 
                    [min]="min"
                    [max]="max"
                    name="date"></kendo-datepicker>
                </ng-template>
            </kendo-grid-column>
            <kendo-grid-command-column title="command" width="220">
                <ng-template kendoGridCellTemplate let-isNew="isNew">
                    <button kendoGridEditCommand type="button" class="k-primary">Edit</button>
                    <button kendoGridRemoveCommand type="button">Remove</button>
                    <button kendoGridSaveCommand type="button" [disabled]="myForm.invalid">{{ isNew ? 'Add' : 'Update' }}</button>
                    <button kendoGridCancelCommand type="button">{{ isNew ? 'Discard changes' : 'Cancel' }}</button>
                </ng-template>
            </kendo-grid-command-column>
          </kendo-grid>
      </form>
  `
})
export class AppComponent implements OnInit {
    public min: Date = new Date(2018, 2, 10);
    public max: Date = new Date(2018, 11, 25);
}

@组件({
选择器：“我的应用程序”，
模板：`
新增
编辑
去除
{{isNew？'Add'：'Update'}}
{{isNew？'Discard changes'：'Cancel'}
`
})
导出类AppComponent实现OnInit{
公开日期：日期=新日期（2018年2月10日）；
公共最大值：日期=新日期（2018年11月25日）；
}

您需要使用最小和最大日期选择器属性。有关日期选择器最小-最大示例，请参阅。 有关日期选择器列模板的示例，请参阅

 @Component({
  selector: 'my-app',
  template: `
      <form novalidate #myForm="ngForm">
          <kendo-grid
              [data]="view | async"
              [height]="533"
              [pageSize]="gridState.take" [skip]="gridState.skip" [sort]="gridState.sort"
              [pageable]="true" [sortable]="true"
              (dataStateChange)="onStateChange($event)"
              (edit)="editHandler($event)" (cancel)="cancelHandler($event)"
              (save)="saveHandler($event)" (remove)="removeHandler($event)"
              (add)="addHandler($event)"
              [navigable]="true"
            >
            <ng-template kendoGridToolbarTemplate>
                <button kendoGridAddCommand type="button">Add new</button>
            </ng-template>
            <kendo-grid-column field="ProductName" title="Product Name">
                <ng-template kendoGridEditTemplate let-dataItem="dataItem">
                    <input [(ngModel)]="dataItem.ProductName" kendoGridFocusable name="ProductName" class="k-textbox" required/>
                </ng-template>
            </kendo-grid-column>
            <kendo-grid-column field="date" title="Date" format="{0:yyyy-MM-dd}">
                <ng-template kendoGridEditTemplate let-dataItem="dataItem">
                    <kendo-datepicker  
                    [format]="'yyyy-MM-dd'" 
                    [(ngModel)]="dataItem.date" 
                    [min]="min"
                    [max]="max"
                    name="date"></kendo-datepicker>
                </ng-template>
            </kendo-grid-column>
            <kendo-grid-command-column title="command" width="220">
                <ng-template kendoGridCellTemplate let-isNew="isNew">
                    <button kendoGridEditCommand type="button" class="k-primary">Edit</button>
                    <button kendoGridRemoveCommand type="button">Remove</button>
                    <button kendoGridSaveCommand type="button" [disabled]="myForm.invalid">{{ isNew ? 'Add' : 'Update' }}</button>
                    <button kendoGridCancelCommand type="button">{{ isNew ? 'Discard changes' : 'Cancel' }}</button>
                </ng-template>
            </kendo-grid-command-column>
          </kendo-grid>
      </form>
  `
})
export class AppComponent implements OnInit {
    public min: Date = new Date(2018, 2, 10);
    public max: Date = new Date(2018, 11, 25);
}

@组件({
选择器：“我的应用程序”，
模板：`
新增
编辑
去除
{{isNew？'Add'：'Update'}}
{{isNew？'Discard changes'：'Cancel'}
`
})
导出类AppComponent实现OnInit{
公开日期：日期=新日期（2018年2月10日）；
公共最大值：日期=新日期（2018年11月25日）；
}

最后，我要做的是使用

kendoGridEditTemplate

而不是

kendoGridCellTemplate

，使用

[formControl]

而不是

[（value）]

或

[（ngModel）]

。如果您遵循文档中找到的，并且希望添加自定义日期列，以便能够完全访问日期选择器的属性，则要添加的标记如下：

让column=“column”
让formGroup=“formGroup”
[min]=“minimumDate”

最后，我要做的是使用

kendoGridEditTemplate

而不是

kendoGridCellTemplate

，使用

[formControl]

而不是

[（value）]

或

[（ngModel）]

。如果您遵循文档中的说明，则