IgniteUI / igniteui-react

High-Performance Data Grid and High-Volume Data Charts
Other
6 stars 1 forks source link

Custom date format in the IgrDataGrid #20

Open jainankit2474 opened 1 year ago

jainankit2474 commented 1 year ago

We want the "MM/DD/YYYY hh:mm A" format for our IgrDateTimeColumn column, But in predefined Infragistics format we didn't find any format with the same as above. We found one nearest match format but that contains seconds in it. (dateTimeFormat="DateTimeShort").

We want to define our custom format for a IgrDateTimeColumn in IgrDataGrid. Please consider it as a priority item.

mddifilippo89 commented 1 year ago

Using formatOverride property on the column you may use a Intl.DateTimeFormat . eg. <IgrDateTimeColumn name="OrderDate" field="OrderDate" headerText="Order Date" width="*>150" horizontalAlignment="right" formatOverride={new Intl.DateTimeFormat('en-US', { dateStyle: 'short', timeStyle: 'short'})}> </IgrDateTimeColumn>

Typescript: let formats: any[] = []; let dateTimeColumn = this.grid.actualColumns.findByName("OrderDate") as IgrDateTimeColumn; formats.push(new Intl.DateTimeFormat('en-US', { dateStyle: 'short', timeStyle: 'short'})); dateTimeColumn.formatOverride = formats[0];

mddifilippo89 commented 1 year ago

image