When displaying date information, you may need to convert it to a different format.
In the Graphics Editor you can configure how a date is interpreted and displayed. Once a field is marked as Date, the configuration options will be available.
Input & Output
Date information can come in a great variety of formats and you might have requirements or preference to display it in a different way. To deal with this, you will find under the Date formatting section two configuration options:
Input defines how a Date formatted by the provider must be 'read'. Identify the format used and configure it here. The provider’s timezone may also affect the final display, refer to the Timezone section for details. Properly configuring the input ensures accurate date and time representation, but also in order to use correctly the provided Date as an ordering criteria or conditional display criteria.
Output defines how the Date will be displayed. Adjust these settings to select the final format and configure the timezone in which the graphics will be used.
Formatting Options
We provide ready-to-use time format templates. As you can see in the image below, Input Templates follow common API and code formats, while Output Templates are designed for display purposes.
If none of them suit your needs, you can choose "Add new…" to set up a custom format.
Timezones
The Input Timezone determines how the date from a provider is read. By default, it is set to UTC, though in some cases, it may be automatically configured.
When binding a Date from a Flowics Provider (like the Collection Provider), it will be set up automatically.
When using a JSON Provider, the timezone could come defined by the Schema. To ensure automatic timezone configuration, add the timezone to the JSON schema, locating the date object and including a Timezone entry as follows:
type: 'Date',
format: 'DD/MM/YYYY HH:mma',
timeZone: 'UTC',
title: 'Creation Date',
},
You can manually configure the Timezone for a JSON Provider from the menu.
For the Google Sheets Provider, the timezone must also be set manually.
The Output Timezone takes the hour from the Input (including the defined timezone) and converts it to your local time (localised by your Browser). If you need to display the content for another timezone, you can manually change it from the menu.
Setting a New Format
When setting a New Format, assign a Name to identify it and establish the Format using Time Mask Tokens, which are explained in the next section. Once saved, the new format will appear at the bottom of the Time Formats list.
Year, month, and day tokens
Tokens are case-sensitive.
Input | Example | Description |
|
| 4 digit year |
|
| 2 digit year |
|
| Year with any number of digits |
|
| Quarter of year. Sets month to first month in quarter. |
|
| Month number |
|
| Month name (localised to browser language) |
|
| Day of month |
|
| Day of month with ordinal (localised to browser language) |
|
| Day of year |
|
| Unix timestamp |
|
| Unix ms timestamp |
Hour, minute, second, millisecond, and timezone tokens
Tokens are case-sensitive.
Input | Example | Description |
|
| Hours (24 hour time) |
|
| Hours (12 hour time used. You need to add |
|
| Hours (24 hour time from 1 to 24) |
|
| Post or ante meridiem (Note the one character |
|
| Minutes |
|
| Seconds |
|
| Fractional seconds (amount of seconds decimals to show) |
|
| Offset from UTC as |
Week year, week, and weekday tokens
For these, the lowercase tokens use the locale-based week start days, while the uppercase tokens use the ISO week date start days.
Input | Example | Description |
|
| Week of year |
|
| Day of the week |
|
| Day name of the week (localised to browser language) |
Some examples
Time Mask | Display | Description |
| 2020-07 | Year and Month |
| Friday, 17 July '20 - 2:00 pm | Complete day |
| 2020 • 07 • 17 | Custom separator |