When displaying date information, there is often the need to convert Dates to a different format.
Our Graphics Editor allows you to configure how a date needs to be interpreted and displayed. After marking a field as Date, you will find the configuration options.
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 two different boxes under Date formatting:
Input defines how a Date formatted by the provider must be 'read'. You need to identify the format being used and configure it from here. Also, the timezone being used by the provider could affect the final display. Read the details at the Timezone section. Configuring the Input is important not only for having the correct date and time, 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. You can change the values here to select the final format you want to use. You can also configure the Timezone in which the Graphics will be used.
Formatting Options
We have some common time format templates ready to use. As you can see in the image below, while Input Templates are common formats from APIs and code, Output Templates are common formats for displaying.
If none of them suit your needs, you can choose "Add new…" to set up a custom format.
Timezones
The Input Timezone defines in which timezone the Date coming from a Provider is read. By default it's considered as UTC, but in some cases it could come 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. If you want the timezone to be set automatically, you can add the timezone to the JSON schema, finding the date object and adding a Timezone like this:
creationDate: {
type: 'Date',
format: 'DD/MM/YYYY HH:mma',
timeZone: 'UTC',
title: 'Creation Date',
},You can also configure the Timezone manually for a JSON Provider, changing it from the menu.
When using Google Sheets Provider, you must configure the Timezone manually from the menu.
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 are planning to display the content for another timezone, you can change it manually from the menu.
Setting a New Format
When setting a New Format you need to choose a Name to identify it and establish the Format using Time Mask Tokens, which are detailed in the next section. After you save it, it will be added 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 aware week start days, and 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 |