KendoReact Grid General Date and Time Pattern

[David]

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

[Stefan]

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

[David]

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

[Stefan]

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

[David]

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?

[Stefan]

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