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:
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:
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.
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.
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?