We are using generic timepicker columns in our grid, but we cannot figure out how to set the locale for these to show the time information in German, for example.
Here is our template:
<ng-template igxCellEditor let-val let-cell="cell"> <igx-time-picker mode="dropdown" [(ngModel)]="cell.editValue"> <ng-template igxTimePickerTemplate let-openDialog="openDialog"> <igx-input-group type="box" [displayDensity]="'compact'"> <igx-prefix> <igx-icon (click)="openDialog(timeInput)">access_time</igx-icon> </igx-prefix> <input #timeInput igxInput [igxFocus]="true" [igxDateTimeEditor]="timeMask" [locale]="getLocale()" [igxTextSelection]="true" [placeholder]="timePlaceholder" (keydown)="onDateEditorKeyDown($event, cell, this)" autocomplete="off" tabindex="0" [(ngModel)]="cell.editValue" /> </igx-input-group> </ng-template> </igx-time-picker> </ng-template>
<igx-time-picker #picker mode="dropdown" cancelButtonLabel="sampleLabel1" okButtonLabel="sampleLabel2">
Thank you for the response and sample. Unfortunately we have some issues with making this work as is.
Our users are in many different countries, so we are dynamically importing the angular locale information that is needed to service the current customer.
This presents us with two problems: localized nomenclature for the grid and other UI elements and displaying selectors in a manner consistent with the end-user's formatting.
We have a nomenclature system in place that will allow us to handle the localized nomenclature strings as needed, such as the ok and cancel buttons on the time popup, so we don't need to handle those here.
In fact, most of our users will continue to use the English nomenclature, so we don't actually want to change the grid's locale for this purpose. The second problem that we face with using the grid's locale is that we would have to bundle the i18n resources into the grid component for every possible language that we support, which would make the component extremely heavy (end user-performance is an extremely high priority for us).
We have figured out how to display the date, time and numeric values in the grid according to the end user's locale. We have also figured out how to display the calendar popup using the end user's locale.
This means that we are left with the problem of displaying the time picker popup using the 24-hour clock rather than the AM/PM.
However, after studying your example for awhile longer, we realized that this can be achieved by passing the same time mask to the igx-time-picker that we do to the igxDateTimeEditor directive.
So, changing
<igx-time-picker mode="dropdown" [(ngModel)]="cell.editValue">
to
<igx-time-picker mode="dropdown" [(ngModel)]="cell.editValue" [format]="timeMask">
resolves our problem.
As a final note, it would be good if there were a way to dynamically load the localization resources as needed rather than having to bundle all of them into the component.