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

Question

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

我试着用模板来做：

<kendo-grid-column field="StartDate" title="Start Date">
    <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
        <kendo-datepicker
        format="{0:dd/MM/yyyy}"
        [(ngModel)]="dataItem"
        ></kendo-datepicker>
    </ng-template>
</kendo-grid-column>

但是我遇到了一堆错误。我怎样才能做到这一点？

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

https://stackblitz.com/edit/angular-ewvsh5

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

[(ngModel)]="dataItem"

应该是：

[(ngModel)]="dataItem.Date"

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

<!-- This doesn't work -->
<kendo-grid-column field="Date" title="Date">
    <ng-template
        kendoGridCellTemplate
        let-dataItem
        let-rowIndex="rowIndex"
        let-isEdited="isEdited"
        *ngIf="editingDateCell"
    >
        <kendo-datepicker [(ngModel)]="dataItem.Date"></kendo-datepicker>
    </ng-template>

    <ng-template
        kendoGridCellTemplate
        let-dataItem
        let-rowIndex="rowIndex"
        let-isEdited="isEdited"
        *ngIf="!editingDateCell"
    >
        {{ dataItem.Date | date }}
    </ng-template>
</kendo-grid-column>

我做错了什么？

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

Answer 1

您需要使用最小和最大日期选择器属性。请参阅this API reference link 获取日期选择器最小值最大值示例。 另请参阅 this forum link 以获取日期选择器列模板的示例。

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

Answer 2

最后，我必须使用kendoGridEditTemplate 代替kendoGridCellTemplate 并使用[formControl] 代替[(value)] 或[(ngModel)]。如果您按照文档中的example 操作，并且想要添加自定义日期列以便拥有对日期选择器属性的完全访问权限，则要添加的标记如下：

<kendo-grid-column
  field="StartDate"
  title="Start Date"
  [format]="{ date: 'dd/MM/yyyy' }"
>
  <ng-template
    kendoGridEditTemplate    <!-- Important -->
    let-column="column"
    let-formGroup="formGroup"
  >
    <kendo-datepicker
      format="dd/MM/yyyy"
      [formControl]="formGroup.get(column.field)"    <!-- Important -->
      [min]="minimumDate"
    >
    </kendo-datepicker>
  </ng-template>
</kendo-grid-column>

Answer 3

要设置日期选择器的最小值和最大值，请使用 [min] 和 [max]。示例见this demo。

Answer 4

这是一个满足您要求的示例代码：

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