Date
A component that allows you to display a formatted date with or without label.
Usage
The Date component allows users to add structured formatted date, with or without label.
Anatomy
- Horizontal: A date with a label structured horizontally
Date Horizontal - Vertical: A date with a label structured vertically
Date vertical
Related
Properties
We are currently updating how we implement components, and the list of properties may not be entirely accurate.
| Property | Type | Description |
|---|---|---|
id | string | The component ID. Must be unique within all layouts/pages in a layout-set. Cannot end with |
value | string | A hardcoded string or expression for resolving the date you want to display. Must resolve to a ISO6801 string. |
textResourceBindings.title | string | A label for the date you want to display. |
format | string | A formatting string based on Unicode Technical standard. |
direction | string | Sets the structured direction of label and value. Enum: [horizontal, vertical] . Default: horizontal. |
Configuration
Add component
{
"id": "date",
"type": "Date",
"textResourceBindings": {
"title": "Date"
},
"value": "2022-09-27 18:00:00.000",
"format": "dd.MM.yyyy",
"direction": "horizontal",
},
Add title and elements
textResourceBindings.title
Label for the date. This can be added as a hardcoded string or as a reference to a text resource.
value
The value of the date to be displayed. Can be added as a string or an expression.
format
Sets the formatting of the date provided in the value field. This is based on Unicode Technical standard.
direction
Decides if the date should be shown under or next to the label. horizontal for showing it next to the label and vertical for under.
Example
Date with label.
...
{
"id": "date",
"type": "Date",
"textResourceBindings": {
"title": "Date"
},
"value": "2022-09-27 18:00:00.000",
"format": "dd.MM.yyyy",
"direction": "horizontal",
},