IgxGrid quick filter time/datetime format

[Timmeeeey]

Question

I would like to change the time and datetime format for the grid's quick filter.
The properties IgxColumnComponent.defaultTimeFormat and IgxColumnComponent.defaultDateTimeFormat seem to do just that but they are marked @internal and @hidden.
Why are these properties not documented? Is it save to use these?

• igniteui-angular version: 12.1.0
• browser: Chrome

[hanastasov]

The pipeArgs column property allows for setting display format, which is also applied on filter inputs. See this sample, where the OrderDate column is set to display a longDate

<igx-column dataType="date" [pipeArgs]="pipeArgs"></igx-column>
 <igx-column field="OrderDate" [pipeArgs]="formatOptions" [dataType]="'date'"></igx-column>

const pipeArgs: IColumnPipeArgs = {
     format: 'longDate',
     timezone: 'UTC',
     digitsInfo: '1.0-2'
}

[Timmeeeey]

If you set the dataType to dateTime and the format to dd.MM.yyyy HH:mm:ss the input format doesn't change accordingly.
This format comes from IgxColumnComponent.defaultDateTimeFormat.

https://stackblitz.com/edit/github-msd86g-kuyrvt

[hanastasov]

I understand. While this gets implemented, you can put your own editing template and provide the input format to the IgxDateTimeEditor directive:

<igx-column field="OrderDate"  [dataType]="'dateTime'"
    [editable]="true">
    <ng-template igxCellEditor let-cell>
        <igx-input-group>
            <input type="text" igxInput [igxDateTimeEditor]="'dd/MM/yyyy'" [(ngModel)]="cell.editValue" [igxFocus]="true"/>
        </igx-input-group>
    </ng-template>
</igx-column>

More details on how to configure your IgxDateTimeEditor

[Timmeeeey]

Ok but it's not just the CellEditor but also the quick filter.
At the moment I just set IgxColumnComponent.defaultTimeFormat and IgxColumnComponent.defaultDateTimeFormat accordingly. This seems to work fine.