Hi Nemanja,
Thank you for reaching out to Syncfusion support.
Query : To display 24H time zone in Grid filter.
To show the default time format of the filter menu in
24-hour format in the Syncfusion DataGrid for Angular, you can use the custom
filter component feature and specify the desired time format using the timeFormat
property of the DateTimePicker component.
Here is an example of how you can use the custom filter
component feature to show the default time format of the filter menu in 24-hour
format:
|
[app.component.html]
<e-column
field="OrderDate"
headerText="Order
Date"
[filter]="filter"
format="dd/MM/yyyy
HH:mm"
width="140"
>
</e-column>
[app.component.ts]
this.filter
= {
ui: {
create: (args:
{ target: Element; column: object }) => {
const flValInput: HTMLElement = createElement('input', {
className: 'flm-input',
});
args.target.appendChild(flValInput);
this.dropInstance = new DateTimePicker({
step: 60,
timeFormat: 'HH:mm',
});
this.dropInstance.appendTo(flValInput);
},
write: (args: {
column: object;
target: Element;
parent: any;
filteredValue: number | string;
}) => {
this.dropInstance.value = args.filteredValue;
},
read: (args: {
target: Element;
column: any;
operator: string;
fltrObj: Filter;
}) => {
args.fltrObj.filterByColumn(
args.column.field,
args.operator,
this.dropInstance.value
);
},
},
};
|
In this example, the timeFormat property of the DateTimePicker
component is set to HH:mm, which will display the time in 24-hour
format.
You can find a sample of this solution at https://stackblitz.com/edit/angular-hjrvvr-9bnynz?file=app.component.html,app.component.ts
For more information about customizing the filter menu in
the Syncfusion DataGrid for Angular, you can refer to the documentation at https://ej2.syncfusion.com/angular/documentation/grid/filtering/filter-menu/#custom-component-in-filter-menu
Regards,
Vinitha Balasubramanian
