How to correctly configure date picker in the grid?

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 = “”;
}

Since I am very, very persistent, I have finally arrived at a mostly workable solution using the igxDateTimeEditor directive.

Basically, we enable two-way binding with the cell.editValue and set the mask to the jquery datepicker defaults (which we have configured based on the user's region settings).

Here is the updated configuration for anyone interested:

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

Note that I had to remove the clear icon because setting the cell.editValue to null in clearDatePicker would cause the editor to report that it was invalid and would not clear the value. So we will just let the user remove the entry manually if they need to (this is what they do in our solution today).

Hello Lance,

After investigating this further, I determined that the selected date could be removed by clearing not only the input value, but the cell.editValue as well. This could be achieved as follows:

public clearDatePicker(cell: IgxGridCellComponent, input: any): void {

            input.value = "__/__/____";

            cell.editValue = null;

    }

I have prepared a sample, demonstrating the described behavior. Please test it on your side and let me know if you have any additional questions.

Regards,
Monika Kirkova,
Infragistics

Thank you for the sample.

While the value is allowed to be cleared using the button, the sample still shows the problem of the date reporting it is invalid (the bright red outline), which I think is incorrect behavior.

Hello Lance,

I have determined that ngModel automatically sets validation classes to the input and the cell when the editValue is being changed. What I could suggest in order to clear the date without applying validation style is binding the input with [value] instead of ngModel:

 <igx-date-picker mode="dropdown" [igxFocus]="true" [labelVisibility]="false" [(ngModel)]="cell.editValue">

                <ng-template igxDatePickerTemplate let-openDialog="openDialog">

                    <igx-input-group type="box" [displayDensity]="'compact'">

                         .      .       .

                        <input #dateInput

                                igxInput

                                 .     .     .

                                [value]="cell.editValue"

                            />

                              .    .    .

                    </igx-input-group>

                </ng-template>

            </igx-date-picker>

I have modified the prepared sample. Please test it on your side and let me know if you have any additional questions.

Regards,
Monika Kirkova,
Infragistics

I have finally had a chance to revisit this issue and discovered that it does not allow the user to remove the date from the cell. Unfortunately this means that this is not a viable solution.

And even more unfortunately, this now presents us with an even more severe problem because we are attempting to use this control in another grid in the details area and this grid checks the ng-invalid class on the cell. Since the cell containing the date control is being marked as invalid when there is no value, the user can never exit editing on the date cell.

Can you please suggest another way that we can prevent the date control from being marked as invalid when the user has cleared the value by deleting the date using the keyboard?