12 hour clock instead of 24 hour clock in an LFD

[Mel (Mel Ozkasim)]

Can you tell me how I can change the way the time is presented in the agenda and speakers detail view from 24h clock to 12h?

Specifically in the single Event app

[Deb (Deb Ghosh)]

You can use our custom Moment handlebar helper to do this in the data view settings.

See data view configuration below:

And the HTML code you need. Note: “Start Time” is the name of the column where the time is stored in the data source.

{{moment [Start Time] inputFormat="HH:mm" format="h:mm a"}}

[twu (Tony Wu)]

You can also use the following which uses Fliplet’s localisation framework and automatically detects the input format.

{{ TD [Start Time] format="h:mm a" }}

Reference: Localization | Fliplet Developers Documentation

[thevoice]

I’ve tried this and it’s still showing time in 24hr format. Also, it’s showing the date in th wrong format. We need the time to display in 12HR format and the Dtae in mm/dd/yy format or March 4, 2023.

[Deb (Deb Ghosh)]

Hi,

Can you share the a sample of the time data stored in your data source so we can confirm?

Thanks,
Deb

[thevoice]

@Deb

{{moment [Start Time] inputFormat="HH:mm" format="h:mm a"}}

[thevoice]

[thevoice]

Here’s the view of the data source. I was told I had to enter it here in 24hr format in order for the agenda to line up properly by times.

[Deb (Deb Ghosh)]

Thanks for this information.

Under the “Field type” dropdown you need to choose the HTML.

Let me know if that helps.

[thevoice]

No good. Still showing 24hr time format.

[Mel (Mel Ozkasim)]

Can you confirm with a screenshot exactly where the 24hr clock is still showing?

[thevoice]

And the Date format is showing yy-mm-dd when we need it to be mm-dd-yy

[Deb (Deb Ghosh)]

Thanks for this.

In oder to change this you need to do the following:

1. Click to edit your LFD.
2. At the bottom click the “Edit component’s code” button:
   
3. Using the tabs go to the “Detail template”
4. Change line 52 to the following HTML

<div class='time'>Start Time: {{moment [Start Time] inputFormat="HH:mm" format="h:mm a"}} , Date: {{[Date]}}</div>

5. Click “Save and close”

See final result below:

Hope this helps!

[thevoice]

Perfect! Now how do I fix the date format? Needs to be Date: 12-06-2024 format

[Deb (Deb Ghosh)]

Then you need to change that same line of HTML to the following:

<div class='time'>Start Time: {{moment [Start Time] inputFormat="HH:mm" format="h:mm a"}} , Date: {{moment [Date] inputFormat="YYYY-MM-DD" format="DD-MM-YYYY"}}</div>

[thevoice]

@Deb

<div class='time'>Start Time: {{moment [Start Time] inputFormat="HH:mm" format="h:mm a"}} , Date: {{moment [Date] inputFormat="YYYY-MM-DD" format="DD-MM-YYYY"}}</div>

PERFECT!!!