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"
| Standalone token | Description | Example |
|---|---|---|
S | millisecond, no padding |
|
SSS | millisecond, padded to 3 |
|
u | fractional seconds, functionally identical to SSS |
|
uu | fractional seconds, between 0 and 99, padded to 2 |
|
uuu | fractional seconds, between 0 and 9 |
|
s | second, no padding |
|
ss | second, padded to 2 padding |
|
m | minute, no padding |
|
mm | minute, padded to 2 |
|
h | hour in 12-hour time, no padding |
|
hh | hour in 12-hour time, padded to 2 |
|
H | hour in 24-hour time, no padding |
|
HH | hour in 24-hour time, padded to 2 |
|
Z | narrow offset |
|
ZZ | short offset |
|
ZZZ | techie offset |
|
ZZZZ | abbreviated named offset |
|
ZZZZZ | unabbreviated named offset |
|
z | IANA zone |
|
a | meridiem |
|
d | day of the month, no padding |
|
dd | day of the month, padded to 2 |
|
c | day of the week, as number from 1-7 (Monday is 1, Sunday is 7) |
|
ccc | day of the week, as an abbreviate localized string |
|
cccc | day of the week, as an unabbreviated localized string |
|
ccccc | day of the week, as a single localized letter |
|
L | month as an unpadded number |
|
LL | month as a padded number |
|
LLL | month as an abbreviated localized string |
|
LLLL | month as an unabbreviated localized string |
|
LLLLL | month as a single localized letter |
|
y | year, unpadded |
|
yy | two-digit year |
|
yyyy | four- to six- digit year, pads to 4 |
|
G | abbreviated localized era |
|
GG | unabbreviated localized era |
|
GGGGG | one-letter localized era |
|
kk | ISO week year, unpadded |
|
kkkk | ISO week year, padded to 4 |
|
W | ISO week number, unpadded |
|
WW | ISO week number, padded to 2 |
|
ii | Local week year, unpadded |
|
iiii | Local week year, padded to 4 |
|
n | Local week number, unpadded |
|
nn | Local week number, padded to 2 |
|
o | ordinal (day of year), unpadded |
|
ooo | ordinal (day of year), padded to 3 |
|
q | quarter, no padding |
|
quarter, padded to 2 |
| |
D | localized numeric date |
|
DD | localized date with abbreviated month |
|
DDD | localized date with full month |
|
DDDD | localized date with full month and weekday |
|
t | localized time |
|
tt | localized time with seconds |
|
ttt | localized time with seconds and abbreviated offset |
|
tttt | localized time with seconds and full offset |
|
T | localized 24-hour time |
|
TT | localized 24-hour time with seconds |
|
TTT | localized 24-hour time with seconds and abbreviated offset |
|
TTTT | localized 24-hour time with seconds and full offset |
|
f | short localized date and time |
|
ff | less short localized date and time |
|
fff | verbose localized date and time |
|
ffff | extra verbose localized date and time |
|
F | short localized date and time with seconds |
|
FF | less short localized date and time with seconds |
|
FFF | verbose localized date and time with seconds |
|
FFFF | extra verbose localized date and time with seconds |
|
X | unix timestamp in seconds |
|
x | unix timestamp in milliseconds |
|
