Components Local time
Petal Framework

Local time

Display the user's local time in the format of your choice.
You need to be a Pro member to use this component.
UTC:
Mon, 29 May 2023 01:44:12 +0000
Local:
your_live_view.html.heex

Here’s a list of the presets:

DATE_SHORT => 10/14/1983
DATE_MED => Oct 14, 1983
DATE_MED_WITH_WEEKDAY => Fri, Oct 14, 1983
DATE_FULL => October 14, 1983
DATE_HUGE => Friday, October 14, 1983
TIME_SIMPLE => 1:30 PM
TIME_WITH_SECONDS => 1:30:23 PM
TIME_WITH_SHORT_OFFSET => 1:30:23 PM EDT
TIME_WITH_LONG_OFFSET => 1:30:23 PM Eastern Daylight Time
TIME_24_SIMPLE => 13:30
TIME_24_WITH_SECONDS => 13:30:23
TIME_24_WITH_SHORT_OFFSET => 13:30:23 EDT
TIME_24_WITH_LONG_OFFSET => 13:30:23 Eastern Daylight Time
DATETIME_SHORT => 10/14/1983, 1:30 PM
DATETIME_MED => Oct 14, 1983, 1:30 PM
DATETIME_FULL => October 14, 1983 at 1:30 PM EDT
DATETIME_HUGE => Friday, October 14, 1983 at 1:30 PM Eastern Daylight Time
DATETIME_SHORT_WITH_SECONDS => 10/14/1983, 1:30:23 PM
DATETIME_MED_WITH_SECONDS => Oct 14, 1983, 1:30:23 PM
DATETIME_FULL_WITH_SECONDS => October 14, 1983 at 1:30:23 PM EDT
DATETIME_HUGE_WITH_SECONDS => Friday, October 14, 1983 at 1:30:23 PM Eastern Daylight Time

If you want precise formatting, you can use the format attribute. See the Luxon docs for more information.

Properties

Defaults are indicated in bold. Required fields have * before the label. Hover over the name for docs.

Name Type Options/Default
for :string -
preset :string "DATE_SHORT", "DATE_MED", "DATE_MED_WITH_WEEKDAY", "DATE_FULL", "DATE_HUGE", "TIME_SIMPLE", "TIME_WITH_SECONDS", "TIME_WITH_SHORT_OFFSET", "TIME_WITH_LONG_OFFSET", "TIME_24_SIMPLE", "TIME_24_WITH_SECONDS", "TIME_24_WITH_SHORT_OFFSET", "TIME_24_WITH_LONG_OFFSET", "DATETIME_SHORT", "DATETIME_MED", "DATETIME_FULL", "DATETIME_HUGE", "DATETIME_SHORT_WITH_SECONDS", "DATETIME_MED_WITH_SECONDS", "DATETIME_FULL_WITH_SECONDS", "DATETIME_HUGE_WITH_SECONDS"
format :string -
class :string -
locale :string -
[all additional properties] Forwarded to the time element.