Angular Datatable with calendar as editable

Question

We have a requirement to have editable Grid with calendar a template column, i am using following code, but it returning error during run time. i think error occurring at the below highlighted row.

ERROR:Uncaught (in promise): Unexpected literal at position 2

 <div class="content">
    <div class="form-section">
        <form *ngIf="checklistForm" class="form" [formGroup]="checklistForm" novalidate>
            <p-growl [(value)]="successMessage"></p-growl>
            <div class="alert alert-danger" role="alert" *ngIf="errorMessage">
                <span>{{ errorMessage }}</span>
            </div>
            <userTracking [isChanged]="isChanged">
            </userTracking>
            <p-dataTable [value]="lstchecklistModel" [responsive]="true" rowGroupMode="subheader" groupField="groupdesc" [editable]="true" [style]="{'margin-top':'10px'}">
                <ng-template pTemplate="rowgroupheader" let-rowData>{{rowData['groupdesc']}}</ng-template>
                <p-column field="labelName" header="Checklist" [style]="{'overflow':'visible', 'width':'300px'}"></p-column>
                <p-column field="required" header="Required?" [editable]="true" [style]="{'overflow':'visible', 'width':'100px'}">
                    <ng-template let-col let-row="rowData" let-i="rowIndex" pTemplate="editor">
                        <p-dropdown [(ngModel)]="row[col.field]" (onChange)="OnRequiredChange(row);" [ngModelOptions]="{standalone: true}" [options]="RequiredValues" [autoWidth]="false" [style]="{'width':'100%'}"></p-dropdown>
                    </ng-template>
                </p-column>
                <p-column field="received" header="Recived?" [editable]="true" [style]="{'overflow':'visible', 'width':'100px'}">
                    <ng-template let-col let-row="rowData" pTemplate="editor">
                        <p-dropdown [(ngModel)]="row[col.field]" [ngModelOptions]="{standalone: true}" (onChange)="OnRecievedChange(row);" [options]="RequiredValues" [autoWidth]="false" [style]="{'width':'100%'}"></p-dropdown>
                    </ng-template>
                </p-column>
                <p-column field="receivedDate" header="Received Date">     
                    <ng-template let-col let-row="rowData" pTemplate="body">
                        {{row[col.field] }}
                    </ng-template>              
                </p-column>
                **<p-column field="mailReceivedDate" header="Mail Received Date" [editable]="true" [style]="{'overflow':'visible'}">
                    <ng-template let-col let-row="rowData" pTemplate="body">
                        {{row[col.field] }}
                    </ng-template>
                    <ng-template let-col let-row="rowData" pTemplate="editor">
                        <p-calendar [(ngModel)]="row[col.field]" [ngModelOptions]="{standalone: true}" [locale]="en" ></p-calendar>
                    </ng-template>
                </p-column>**
                <p-column field="updatedBy" header="Updated By"></p-column>
            </p-dataTable>
            <footer class="pager">
                <div class="button-group">
                    <button class="btn btn-primary btn-sm" (click)="saveChecklist();" [disabled]="!checklistForm.valid">Save</button>
                    <button class="btn btn-primary btn-sm" (click)="SaveandContinue();" [disabled]="!checklistForm.valid">Save & Continue</button>
                    <button class="btn btn-secondary btn-sm" type="reset" (click)="loadData();" formnovalidate>Cancel</button>
                </div>
            </footer>
        </form>
    </div>
</div>

Answer 1

I had this exact same error in my project when trying to use a p-calendar within a p-table. My problem was that the ngModel object that the calendar was bound to came from an http request and thus the runtime type of [(ngModel)]="myDate" was a string.

How I solved this issue:

this.myObject = get(); if (myObject.myDate) { myObject.myDate = new Date(myObject.myDate); }

The if statement is there because new Date(null) returns some date in 1969 (specifically where Date.getTime is 0) as opposed to null.