Graphics Date Formatting

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.


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
YYYY 2014 4 digit year
YY 14 2 digit year
Y 25 Year with any number of digits
Q 1..4 Quarter of year. Sets month to first month in quarter.
M MM 1..12 Month number
MMM MMMM Jan..December Month name (localised to browser language)
D DD 1..31 Day of month
Do 1st..31st Day of month with ordinal (localised to browser language)
DDD DDDD 1..365 Day of year
X 1410715640.579 Unix timestamp
x 1410715640579 Unix ms timestamp

Hour, minute, second, millisecond, and timezone tokens

Tokens are case-sensitive.

Input Example Description
H HH 0..23 Hours (24 hour time)
h hh 1..12 Hours (12 hour time used. You need to add a A in order to display am or pm )
k kk 1..24 Hours (24 hour time from 1 to 24)
a A / p P am pm Post or ante meridiem (Note the one character a p are also considered valid)
m mm 0..59 Minutes
s ss 0..59 Seconds
S SS SSS ... SSSSSSSSS 0..999999999 Fractional seconds (amount of seconds decimals to show)
Z ZZ +3:00 Offset from UTC as +-HH:mm, +-HHmm, or Z

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
w ww 1..53 Week of year
e 0..6 Day of the week
ddd dddd Mon...Sunday Day name of the week (localised to browser language)

Some examples

Time Mask Display Description
YYYY-MM 2020-07 Year and Month
dddd, DD MMM 'YY - hh:mm a Friday, 17 July '20 - 2:00 pm Complete day
YYYY • MM • DD 2020 • 07 • 17 Custom separator

Was this article helpful?