How to do inline editing of date column using angular kendo grid

Question

I'm using Kendo Angular grid and want to do an inline edit of a date column. The column html has been given as follows

My model class in angular is as follows,

I have specified the 'dob' in my entity class as follows,

But when tried to do inline editing using angular grid (reactive form editing) an error is raised

The error is : The value should a valid javascript date instance.

My data in the db is as follows

Answer 1

<kendo-grid-column 
field="dob" title="Date of Birth" [width]="150">
            <ng-template kendoGridCellTemplate let-dataItem>
                {{ dataItem.dob| date:'dd-MMM-yyyy' }}
            </ng-template>
            <ng-template kendoGridEditTemplate let-dataItem="dataItem" let- 
               formGroup="formGroup">
                  <kendo-datepicker [readOnlyInput]="true" format="dd-MMM-yyyy"
                       [value]="dataItem.dob" 
                        [formControl]="formGroup.get('dob')">
                  </kendo-datepicker>
           </ng-template>
</kendo-grid-column>

Answer 2

Try this will work for the kendo grid in angular with an inline edit date.

<kendo-grid-column field="Date" title="Date" format="dd/MM/yyyy">
                    <ng-template kendoGridCellTemplate let-dataItem="dataItem" let-formGroup="formGroup"
                        let-column="column">
                        <div> {{dataItem.Date | date : 'dd/MM/yyyy'}} </div>
                    </ng-template>
                    <ng-template kendoGridEditTemplate let-dataItem="dataItem" let-formGroup="formGroup"
                        let-column="column">
                        <kendo-datepicker format="dd/MM/yyyy" [valuePrimitive]="true" formatPlaceholder="formGroup.get(column.field)"
                            [formControl]="formGroup.get('Date')">
                        </kendo-datepicker>                        
                    </ng-template>
                </kendo-grid-column>