Date Component
The Date component is designed to work specifically with a data field that contains a Date value. A key aspect of using the Date component effectively is understanding how to configure the INPUT and OUTPUT formats, which can be adjusted in the Properties section. These settings control how date values are read and displayed.
INPUT - This format should align with the Date value structure in your JSON dataset. Ensure it matches how dates are provided in your data source.
OUTPUT - This format determines how the Date value will appear in your document. Customize it to fit your desired display style.
When configuring the INPUT and OUTPUT formatting, refer to the table below for a clear explanation of the supported formats.
If you have datetime in your JSON dataset, you have to use the T-separator in the editor input format, e.g. Y-m-d\THH:mm:ss
Let's say the input format in your JSON dataset is YYYY-MM-DD\THH:mm:ss.SSS\Z (e.g. 2019-12-09T18:41:23.853Z). You have to make sure that the input format is the same in the editor.
Date functions
Is it possible to conditionally change the component style or hide the component?
How to use QR codes?
INPUT - This format should align with the Date value structure in your JSON dataset. Ensure it matches how dates are provided in your data source.
OUTPUT - This format determines how the Date value will appear in your document. Customize it to fit your desired display style.
When configuring the INPUT and OUTPUT formatting, refer to the table below for a clear explanation of the supported formats.
| Category | Token | Output |
|---|---|---|
| Month | M | 1 2 ... 11 12 |
| Mo | 1st 2nd ... 11th 12th | |
| MM | 01 02 ... 11 12 | |
| MMM | Jan Feb ... Nov Dec | |
| MMMM | January February ... November December | |
| Quarter | Q | 1 2 3 4 |
| Qo | 1st 2nd 3rd 4th | |
| Day of Month | D | 1 2 ... 30 31 |
| Do | 1st 2nd ... 30th 31st | |
| DD | 01 02 ... 30 31 | |
| Day of Year | DDD | 1 2 ... 364 365 |
| DDDo | 1st 2nd ... 364th 365th | |
| DDDD | 001 002 ... 364 365 | |
| Day of Week | d | 0 1 ... 5 6 |
| do | 0th 1st ... 5th 6th | |
| dd | Su Mo ... Fr Sa | |
| ddd | Sun Mon ... Fri Sat | |
| dddd | Sunday Monday ... Friday Saturday | |
| Day of Week (Locale) | e | 0 1 ... 5 6 |
| Day of Week (ISO) | E | 1 2 ... 6 7 |
| Week of Year | w | 1 2 ... 52 53 |
| wo | 1st 2nd ... 52nd 53rd | |
| ww | 01 02 ... 52 53 | |
| Year | YY | 70 71 ... 29 30 |
| YYYY | 1970 1971 ... 2029 2030 | |
| Week Year | gg | 70 71 ... 29 30 |
| gggg | 1970 1971 ... 2029 2030 | |
| AM/PM | A | AM PM |
| a | am pm | |
| Hour | H | 0 1 ... 22 23 |
| HH | 00 01 ... 22 23 | |
| h | 1 2 ... 11 12 | |
| hh | 01 02 ... 11 12 | |
| k | 1 2 ... 23 24 | |
| kk | 01 02 ... 23 24 | |
| Minute | m | 0 1 ... 58 59 |
| mm | 00 01 ... 58 59 | |
| Second | s | 0 1 ... 58 59 |
| ss | 00 01 ... 58 59 | |
| Fractional Second | S | 0 1 ... 8 9 |
| SS | 00 01 ... 98 99 | |
| SSS | 000 001 ... 998 999 | |
| SSSS ... SSSSSSSSS | 000[0..] 001[0..] ... 998[0..] 999[0..] | |
| Time Zone | z or zz | EST CST ... MST PST |
| Z | -07:00 -06:00 ... +06:00 +07:00 | |
| ZZ | -0700 -0600 ... +0600 +0700 | |
| Unix Timestamp | X | 1360013296 |
| Unix Millisecond Timestamp | x | 1360013296123 |
If you have datetime in your JSON dataset, you have to use the T-separator in the editor input format, e.g. Y-m-d\THH:mm:ss
Let's say the input format in your JSON dataset is YYYY-MM-DD\THH:mm:ss.SSS\Z (e.g. 2019-12-09T18:41:23.853Z). You have to make sure that the input format is the same in the editor.
Related articles you may find helpful
Date functions
Is it possible to conditionally change the component style or hide the component?
How to use QR codes?
Updated on: 21/01/2025
Thank you!