Is there any way to define maximum and minimum date for a date column of a kendo grid? - kendo-ui

Question

I have a kendo grid with in-cell editing and a pair of date columns. I want to specify a maximum and a minimum date for the datepickers inside the cell the user is editing, but it doesn't seem to exist any property for that.
I tried to do it with templates:
<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>
But I'm getting a bunch of errors. How can I make this work?
EDIT: I created a stackblitz example based on one of the in-cell editing examples that I found in the documentation:
https://stackblitz.com/edit/angular-ewvsh5
Here, I discovered that I wasn't specifying the property ngModel has to connect to:
[(ngModel)]="dataItem"
Should be:
[(ngModel)]="dataItem.Date"
Ok, I changed it, but now, when I click on the date cell, instead of appearing a datepicker, it appears a regular input. Please, check this part in the components template, it's where the problem is:
<!-- 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>
What am I doing wrong?
EDIT II: All the solutions so far show the datepicker inside the cell. That's fine, I know how to do it. The problem is that before the user clicks to edit the cell, that cell must be like a label, when the user clicks on that label, it has to become a datepicker. If the user changes the date and clicks away, the grid has to know that the data has been updated and act accordly. In summary, I need to preserve the in-cell editing behavior.

Answer 1

You need to use the min and max date picker properties. Please refer to this API reference link for date picker min max example.
Also refer to this forum link for an example of a date picker column template.
#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

To set a minimum and maximum of a datepicker use [min] and [max]. See this demo for an example.

Answer 4

Here's an example code that does what you require:
#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;
});
}