Customizing Date Format in the Timeline Component using Luxon
Last updated
Last updated
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.
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"
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
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