Customizing Date Format in the Timeline Component using Luxon

Overview

Discover the power of flexibility in the Avonni Timeline Component! Our integration with the Luxon Library allows for various date formatting options. Customize to your preference, ensuring each date displays precisely as you desire, enhancing clarity and user experience within your timelines.

How to customize the Date Format

• Open the Component Builder to access all the Settings of the Timeline Component.

• In the 'Item Date Format' field, input the specific Standalone token corresponding to how you want the date to appear. You can find the correct Luxon value in the ‘Luxon Table of Token’ provided above.

For example, if you want to display the date as:

• August 6, 2014 >> Enter DDD in the Item Date Format Field

• Wednesday >> Enter cccc in the Item Date Format Field

If you want to insert text in the label, you need to escape it using single quote. For example: 'From' : cccc to get a Date Formatted like: "From : Wednesday"

Luxon Table of Token

Standalone token	Description	Example
S	millisecond, no padding	54
SSS	millisecond, padded to 3	054
u	fractional seconds, functionally identical to SSS	054
uu	fractional seconds, between 0 and 99, padded to 2	05
uuu	fractional seconds, between 0 and 9	0
s	second, no padding	4
ss	second, padded to 2 padding	04
m	minute, no padding	7
mm	minute, padded to 2	07
h	hour in 12-hour time, no padding	1
hh	hour in 12-hour time, padded to 2	01
H	hour in 24-hour time, no padding	9
HH	hour in 24-hour time, padded to 2	13
Z	narrow offset	+5
ZZ	short offset	+05:00
ZZZ	techie offset	+0500
ZZZZ	abbreviated named offset	EST
ZZZZZ	unabbreviated named offset	Eastern Standard Time
z	IANA zone	America/New_York
a	meridiem	AM
d	day of the month, no padding	6
dd	day of the month, padded to 2	06
c	day of the week, as number from 1-7 (Monday is 1, Sunday is 7)	3
ccc	day of the week, as an abbreviate localized string	Wed
cccc	day of the week, as an unabbreviated localized string	Wednesday
ccccc	day of the week, as a single localized letter	W
L	month as an unpadded number	8
LL	month as a padded number	08
LLL	month as an abbreviated localized string	Aug
LLLL	month as an unabbreviated localized string	August
LLLLL	month as a single localized letter	A
y	year, unpadded	2014
yy	two-digit year	14
yyyy	four- to six- digit year, pads to 4	2014
G	abbreviated localized era	AD
GG	unabbreviated localized era	Anno Domini
GGGGG	one-letter localized era	A
kk	ISO week year, unpadded	14
kkkk	ISO week year, padded to 4	2014
W	ISO week number, unpadded	32
WW	ISO week number, padded to 2	32
ii	Local week year, unpadded	14
iiii	Local week year, padded to 4	2014
n	Local week number, unpadded	32
nn	Local week number, padded to 2	32
o	ordinal (day of year), unpadded	218
ooo	ordinal (day of year), padded to 3	218
q	quarter, no padding	3
qq	quarter, padded to 2	03
D	localized numeric date	9/4/2017
DD	localized date with abbreviated month	Aug 6, 2014
DDD	localized date with full month	August 6, 2014
DDDD	localized date with full month and weekday	Wednesday, August 6, 2014
t	localized time	9:07 AM
tt	localized time with seconds	1:07:04 PM
ttt	localized time with seconds and abbreviated offset	1:07:04 PM EDT
tttt	localized time with seconds and full offset	1:07:04 PM Eastern Daylight Time
T	localized 24-hour time	13:07
TT	localized 24-hour time with seconds	13:07:04
TTT	localized 24-hour time with seconds and abbreviated offset	13:07:04 EDT
TTTT	localized 24-hour time with seconds and full offset	13:07:04 Eastern Daylight Time
f	short localized date and time	8/6/2014, 1:07 PM
ff	less short localized date and time	Aug 6, 2014, 1:07 PM
fff	verbose localized date and time	August 6, 2014, 1:07 PM EDT
ffff	extra verbose localized date and time	Wednesday, August 6, 2014, 1:07 PM Eastern Daylight Time
F	short localized date and time with seconds	8/6/2014, 1:07:04 PM
FF	less short localized date and time with seconds	Aug 6, 2014, 1:07:04 PM
FFF	verbose localized date and time with seconds	August 6, 2014, 1:07:04 PM EDT
FFFF	extra verbose localized date and time with seconds	Wednesday, August 6, 2014, 1:07:04 PM Eastern Daylight Time
X	unix timestamp in seconds	1407287224
x	unix timestamp in milliseconds	1407287224054