We have some very specific requirements from our end users for the date picker in the grid. I have figured out most of the issues, but am struggling with completing the implementation.

Our user requirements are:

• The date must be selectable from a calendar popup or by typing directly in the grid.
• A shortcut of CTRL+D must be support to set the date picker to today's date.
• A clear button must be available to clear the dates.
• If the ESC button is pressed while the cell is in edit mode, any changes made by any of the above methods must be ignored and the previous value must be restored.
• (There are additional requirements about limiting the input to date values and supporting internationalization, but we can work on those after this set of issues has been ironed out)

After much trial and error and many, many google searches, I have come up with this definition:

        <ng-template igxCellEditor let-val let-cell="cell" >
            <igx-date-picker mode="dropdown" [igxFocus]="true" [labelVisibility]="false" [(ngModel)]="cell.editValue">
                <ng-template igxDatePickerTemplate let-openDialog="openDialog" let-displayData="displayData">
                    <igx-input-group type="box" [displayDensity]="'compact'">
                        <igx-prefix>
                            <igx-icon (click)="openDialog(dateInput)">today</igx-icon>
                        </igx-prefix>
                        <input #dateInput
                                igxInput
                                (click)="openDialog(dateInput)"
                                (keydown)="onDateEditorKeyDown($event, cell, dateInput)"
                                autocomplete="off"
                                tabindex="0"
                                [value]="displayData"
                            />
                        <igx-suffix (click)="clearDatePicker(cell, dateInput)" tabindex="0">
                            <igx-icon>clear</igx-icon>
                        </igx-suffix>
                    </igx-input-group>
                </ng-template>
            </igx-date-picker>
        </ng-template>

With this implementation, selecting a date from the calendar dialog that is shown when the user presses the icon works correctly, including restoring the previous value when the user presses esc.

However, nothing else works quite correctly:

• If the user types into the date and then leaves the cell, what they have entered is ignored.
• CTRL+D works correctly to change the date, but if the user hits esc, the changes are still recorded (code for onDateEditorKeyDown included below)
• Pressing the clear icon removes the value from the editor, but this change is not propagated to the grid when the user leaves the cell (code for clearDatePicker included below).

I am reasonably sure there are simple solutions, but I have been unable to figure them out.

    public onDateEditorKeyDown(evt: any, cell: IgxGridCellComponent, input: any): void {
            const magicKey = evt.ctrlKey || evt.metaKey;
            if (!magicKey || evt.which !== 68) {
                return;
            }

            cell.editValue = new Date();
    }

    public clearDatePicker(cell: IgxGridCellComponent, input: any): void {
            input.value = "";
    }