Formatting date time in item template

markpeacock commented 1 year ago

I have an item template similar to the below

<div
    style="
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
        display:flex;
        flex-direction: column;
        margin: 16px;
        padding: 8px;
        border-radius: 8px;
    ">
    <div>{{Start Time}}</div>
</div>

The Start Time data comes from a SharePoint list Date Time field and therefore displays the date according to the ISO 8601 standard i.e. 2011-08-12T20:17:46.384Z.

How do I format this data from within the item template so that it appears as just the time portion, i.e. 20:17?

The formatting part is straightforward if I could use Power App formatting functions, however, I do not seem to be able to use those in the context of the item template and the handlebar notation.

Thanks for the help!

scottdurow commented 1 year ago

Hi @markpeacock - you can use 'AddColumns' to create an additional column with the formatted date in your input data - and then use that inside the Item Template.

scottdurow commented 1 year ago

Hi @markpeacock, Did you manage to get this working?

w1ngsss commented 1 year ago

Hi @scottdurow, hi everyone,

I was facing the same issue and got it working using an additional column with the proper formatting. The same approach was used when I was adding user initials to the template, just like in your YouTube tutorials.

However, I was wondering if Handlebars helpers couldn't also be a solution to these formatting issues. I wasn't able to register or implement helpers (by using Handlebars.registerHelper) using the template, though. Any thoughts on this idea?

Thank you very much for your help and also for this amazing component!

scottdurow / power-drag-drop

Formatting date time in item template #33