# Customizing Date Format in the Timeline Component using Luxon
## Overview
Discover the power of flexibility in the [Avonni Timeline Component](/flow/flow-components/timeline.md)! 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](#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
{% hint style="info" %}
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"
{% endhint %}
## 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` |
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.avonnicomponents.com/flow/tutorials/components/timeline/customizing-date-format-in-the-timeline-component-using-luxon.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.