KendoReact Grid General Date and Time Pattern

6 posts, 0 answers
  1. David
    David avatar
    35 posts
    Member since:
    Sep 2019

    Posted 18 Mar Link to this post

    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

  2. Stefan
    Admin
    Stefan avatar
    3070 posts

    Posted 18 Mar Link to this post

    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.

  3. David
    David avatar
    35 posts
    Member since:
    Sep 2019

    Posted 18 Mar in reply to Stefan Link to this post

    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

  4. Stefan
    Admin
    Stefan avatar
    3070 posts

    Posted 19 Mar Link to this post

    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/.

  5. David
    David avatar
    35 posts
    Member since:
    Sep 2019

    Posted 24 Mar in reply to Stefan Link to this post

    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?

  6. Stefan
    Admin
    Stefan avatar
    3070 posts

    Posted 24 Mar Link to this post

    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.

Back to Top