This is a migrated thread and some comments may be shown as answers.

KendoReact Grid General Date and Time Pattern

5 Answers 3114 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
David
Top achievements
Rank 1
Iron
Iron
Veteran
David asked on 18 Mar 2021, 08:09 AM

Hi,

The KendoReact Grid renders both general (G) and custom date formats including AM/PM (e.g. dd/MM/yyyy hh:mm:ssa) with lowercase am/pm values. This is in contrast to Kendo documentation e.g. https://github.com/telerik/kendo-intl/blob/develop/docs/date-formatting/index.md. Is there any way to render a datetime value with uppercase AM/PM in a KendoReact grid without using a custom cell and date formatter? We are already using IntlProvider.

Kind regards,

David

5 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 18 Mar 2021, 01:08 PM

Hello, David,

This is coming from the cultural details based on the chosen culture.

For example, in this demo, you can see how in one culture the same format is `a.m.` wherein the other culture is `AM`:

https://stackblitz.com/edit/react-rrdvbi?file=app/main.jsx

This is coming directly from the official CLDR data and KendoReact has no control over it:

http://cldr.unicode.org/

Please let me know if you need additional information on this matter.

Regards,
Stefan
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

0
David
Top achievements
Rank 1
Iron
Iron
Veteran
answered on 19 Mar 2021, 02:07 AM

Thanks for clarifying Stefan, I can see that if you choose a different locale then the general format changes. The issue is that we have screens with both Kendo controls (inputs, grids) which have their format set by the IntlProvider, and formatted datetime strings. The library used to format datetime strings uses uppercase AM/PM regardless of the locale.

Is there a react equivalent to the jQuery kendo.format, or any other KendoReact method of formatting a javascript date object to a string so that we can present datetimes in a consistent manner?

Kind regards,

David

0
Stefan
Telerik team
answered on 19 Mar 2021, 02:34 PM

Hello, David,

The IntlProvide has its own methods for formating the dates and numbers:

https://www.telerik.com/kendo-react-ui/components/intl/i18n/

Using these methods should result in formating the components and custom values in a consistent way.

Regards,
Stefan
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
David
Top achievements
Rank 1
Iron
Iron
Veteran
answered on 24 Mar 2021, 10:38 AM

Thanks Stefan,

All of the examples in the link provided assume that you want to create a new DateFormatter component to display dates, whereas I would like a global helper function that takes a date and returns a string. Does this mean I need to create a new Intl.IntlService instance in the function in order to use formatDate, or is there some other way to access the formatDate method?

0
Stefan
Telerik team
answered on 24 Mar 2021, 02:47 PM

Hello, David,

Creating a global function that internally uses IntlService and formats a date dynamically seems like the best approach in this case.

This is one of React`s main concepts to have re-usable components/functions that will be used in multiple places.

Regards,
Stefan
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
General Discussions
Asked by
David
Top achievements
Rank 1
Iron
Iron
Veteran
Answers by
Stefan
Telerik team
David
Top achievements
Rank 1
Iron
Iron
Veteran
Share this question
or