Question

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

我尝试使用模板来做到这一点：

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

我在做什么错了？

编辑II：到目前为止，所有解决方案都显示单元格内部的日期选择器。很好，我知道该怎么做。问题在于，在用户单击以编辑单元格之前，该单元格必须像标签，当用户单击该标签时，它必须成为日期选择器。如果用户更改日期并单击，则网格必须知道数据已更新并采取相应措施。总之，我需要保留单元内编辑行为。

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

Finally, what I had to do is to use the kendoGridEditTemplate instead of the kendoGridCellTemplate and use [formControl] instead of [(value)] or [(ngModel)]. If you follow the example found in the documentation, and you want to add a custom date column so you have full access to the datepicker's properties, the markup to add is this one:

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

有什么方法可以为剑道网格的日期列定义最大和最小日期？

4 个答案: