Fluent OMS UI / Admin Console Date Time Format

Get Started
Functionality
Learning
Extension
Dev Tooling
APIs
Releases

Essential knowledge

Authors:

Randy Chan, Holger Lierse

Changed on:

26 June 2024

Overview

Handy reference guide on how to display date time value on the UIFor Date format and conversion in UI, two functions can be used:

`formateDate`
`dateStringFormatter` (if true, then it will leave it as UTC timezone, else, it will convert to the user's browser timezone)

Key points

Examples of how to display date time format in both OMS webapp and Admin Console

For Date format and conversion in UI, two functions can be used:

formateDate
dateStringFormatter (if true, then it will leave it as UTC timezone, else, it will convert to the user's browser timezone)

Here is the example output of createdOn based on my GMT+10 timezone:

Created Date: {{formatDate node.createdOn day='numeric' month='numeric' year='numeric' hour='numeric' minute='numeric'}}	Created Date: {{dateStringFormatter node.createdOn 'YYYY-MM-DD[T]HH:mm:ss.SSS[Z]'}}	Created Date: {{dateStringFormatter node.createdOn 'YYYY-MM-DD[T]HH:mm:ss.SSS[Z]' false}}	Created Date: {{dateStringFormatter node.createdOn 'YYYY-MM-DD[T]HH:mm:ss.SSS[Z]' true}}	Created On: {{node.createdOn}}	Bad Example: Created Date (wrong): {{dateStringFormatter node.createdOn 'YYYY-MM-DD[T]HH:mm:ss.SSS[Z]' utc=true}}	Bad Example: Created Date (wrong): {{dateStringFormatter node.createdOn 'YYYY-MM-DD[T]HH:mm:ss.SSS[Z]' 'true'}}
16/07/2021, 08:43	2021-07-16T08:43:47.279Z	2021-07-16T08:43:47.279Z	2021-07-15T22:43:47.279Z	2021-07-15T22:43:47.279Z	2021-07-16T08:43:47.279Z	2021-07-16T08:43:47.279Z
15/07/2021, 10:24	2021-07-15T10:24:54.844Z	2021-07-15T10:24:54.844Z	2021-07-15T00:24:54.844Z	2021-07-15T00:24:54.844Z	2021-07-15T10:24:54.844Z	2021-07-15T10:24:54.844Z
15/07/2021, 10:24	2021-07-15T10:24:53.224Z	2021-07-15T10:24:53.224Z	2021-07-15T00:24:53.224Z	2021-07-15T00:24:53.224Z	2021-07-15T10:24:53.224Z	2021-07-15T10:24:53.224Z

1{
2"component": "shared.components.material.DynamicList",
3"params": {
4"graphql": {
5"fragment": "fragment Listing on Order{ id ref retailer{id tradingName} type status retailer{id} workflowRef workflowVersion totalPrice totalTaxPrice createdOn customer{id firstName lastName }} "
6},
7"defaultPageSize": 20,
8"dataSource": "orders",
9"attributes": [
10{
11"label": "i18n:fc.om.orders.index.list.column.orderRef.heading",
12"template": "{{node.ref}}",
13"link_template": "#/orders/{{node.id}}"
14},
15{
16"label": "Created Date: {{formatDate node.createdOn day='numeric' month='numeric' year='numeric' hour='numeric' minute='numeric'}}",
17"template": "{{formatDate node.createdOn day='numeric' month='numeric' year='numeric' hour='numeric' minute='numeric'}}"
18},
19{
20"label": "Created Date: {{dateStringFormatter node.createdOn 'YYYY-MM-DD[T]HH:mm:ss.SSS[Z]'}}",
21"template": "{{dateStringFormatter node.createdOn 'YYYY-MM-DD[T]HH:mm:ss.SSS[Z]'}}"
22},
23{
24"label": "Created Date: {{dateStringFormatter node.createdOn 'YYYY-MM-DD[T]HH:mm:ss.SSS[Z]' false}}",
25"template": "{{dateStringFormatter node.createdOn 'YYYY-MM-DD[T]HH:mm:ss.SSS[Z]' false}}"
26},
27{
28"label": "Created Date: {{dateStringFormatter node.createdOn 'YYYY-MM-DD[T]HH:mm:ss.SSS[Z]' true}}",
29"template": "{{dateStringFormatter node.createdOn 'YYYY-MM-DD[T]HH:mm:ss.SSS[Z]' true}}"
30},
31{
32"label": "Created Date: {{node.createdOn}}",
33"template": "{{node.createdOn}}"
34},
35{
36"label": "Created Date (wrong): {{dateStringFormatter node.createdOn 'YYYY-MM-DD[T]HH:mm:ss.SSS[Z]' utc=true}}",
37"template": "{{dateStringFormatter node.createdOn 'YYYY-MM-DD[T]HH:mm:ss.SSS[Z]' utc=true}}"
38},
39{
40"label": "Created Date (wrong): {{dateStringFormatter node.createdOn 'YYYY-MM-DD[T]HH:mm:ss.SSS[Z]' 'true'}}",
41"template": "{{dateStringFormatter node.createdOn 'YYYY-MM-DD[T]HH:mm:ss.SSS[Z]' 'true'}}"
42},
43{
44"label": "i18n:fc.om.orders.index.list.column.customer.heading",
45"template": "{{node.customer.firstName}} {{node.customer.lastName}}"
46},
47{
48"label": "i18n:fc.om.orders.index.list.column.status.heading",
49"template": "{{node.status}}"
50},
51{
52"label": "i18n:fc.om.orders.index.list.column.orderType.heading",
53"template": "{{i18n 'fc.om.order.type.'node.type _fallback=node.type}}"
54},
55{
56"label": "i18n:fc.om.orders.index.list.column.orderValue.heading",
57"template": "{{node.totalPrice}}"
58},
59{
60"label": "i18n:fc.om.orders.index.list.column.retailerName.heading",
61"template": "{{node.retailer.tradingName}}"
62}
63]
64}
65}

Local time calculation example

local timeThe local time calculation is based on the "value" date value NOT the current date that you open the Browser. Here is the example on a date in AEST and another one in AEDT where the screen opened on 1-May: No alt provided

Using dateStringFormatter in query variables

Here is an example of using the dateString Formatter in query variables. If the third parameter, UTC, is set to TRUE, OMS will convert the date to UTC. Here is an example with two variables one with current timezone (GMT+10) and the other variable with UTC=TRUE: ` "data": {`

`            "query": "query ($ref: [String], $fulfilments_first: Int, $last_update: DateTime, $last_updateUTC: DateTime) {\n  fulfilmentsLocalTime:fulfilments(first: $fulfilments_first, ref: $ref) {\n    edges {\n      node {\n        id\n        ref\n  expiryTime      createdOn\n}\n}\n}\n\n  fulfilmentsTime1:fulfilments(first: $fulfilments_first, ref: $ref, expiryTime: {to: $last_update} ) {\n    edges {\n      node {\n        id\n        ref\n  expiryTime      createdOn\n            }\n}}\n\n fulfilmentsTime2:fulfilments(first: $fulfilments_first, ref: $ref, expiryTime: {to: $last_updateUTC} ) {\n    edges {\n      node {\n        id\n        ref\n  expiryTime      createdOn\n            }\n    }\n\n   }\n}",`

` "variables": {`` "fulfilments_first": 5,`` "last_update": "{{dateStringFormatter (dateAdd day=0) 'YYYY-MM-DD[T]HH:mm:ss.SSS[Z]'}}",`

`              "last_updateUTC": "{{dateStringFormatter (dateAdd day=0) 'YYYY-MM-DD[T]HH:mm:ss.SSS[Z]' true}}"`

` }`` },`
No alt provided

Randy Chan

Contributors:

Copyright © 2024-2026 Fluent Retail Pty Ltd (trading as Fluent Commerce). Unless otherwise expressly stated in a current written agreement with Fluent Commerce or any of its affiliates or on any single page of the docs.fluentcommerce.com site, use of the materials on this site is strictly limited to viewing by individuals over 18 years old for legitimate commercially appropriate reasons; and any downloading, copying or other actions or uses of any kind or by any means of the materials on this site, including by artificial intelligence tools, is strictly prohibited. All other rights reserved.

1{
2"component": "shared.components.material.DynamicList",
3"params": {
4"graphql": {
5"fragment": "fragment Listing on Order{ id ref retailer{id tradingName} type status retailer{id} workflowRef workflowVersion totalPrice totalTaxPrice createdOn customer{id firstName lastName }} "
6},
7"defaultPageSize": 20,
8"dataSource": "orders",
9"attributes": [
10{
11"label": "i18n:fc.om.orders.index.list.column.orderRef.heading",
12"template": "{{node.ref}}",
13"link_template": "#/orders/{{node.id}}"
14},
15{
16"label": "Created Date: {{formatDate node.createdOn day='numeric' month='numeric' year='numeric' hour='numeric' minute='numeric'}}",
17"template": "{{formatDate node.createdOn day='numeric' month='numeric' year='numeric' hour='numeric' minute='numeric'}}"
18},
19{
20"label": "Created Date: {{dateStringFormatter node.createdOn 'YYYY-MM-DD[T]HH:mm:ss.SSS[Z]'}}",
21"template": "{{dateStringFormatter node.createdOn 'YYYY-MM-DD[T]HH:mm:ss.SSS[Z]'}}"
22},
23{
24"label": "Created Date: {{dateStringFormatter node.createdOn 'YYYY-MM-DD[T]HH:mm:ss.SSS[Z]' false}}",
25"template": "{{dateStringFormatter node.createdOn 'YYYY-MM-DD[T]HH:mm:ss.SSS[Z]' false}}"
26},
27{
28"label": "Created Date: {{dateStringFormatter node.createdOn 'YYYY-MM-DD[T]HH:mm:ss.SSS[Z]' true}}",
29"template": "{{dateStringFormatter node.createdOn 'YYYY-MM-DD[T]HH:mm:ss.SSS[Z]' true}}"
30},
31{
32"label": "Created Date: {{node.createdOn}}",
33"template": "{{node.createdOn}}"
34},
35{
36"label": "Created Date (wrong): {{dateStringFormatter node.createdOn 'YYYY-MM-DD[T]HH:mm:ss.SSS[Z]' utc=true}}",
37"template": "{{dateStringFormatter node.createdOn 'YYYY-MM-DD[T]HH:mm:ss.SSS[Z]' utc=true}}"
38},
39{
40"label": "Created Date (wrong): {{dateStringFormatter node.createdOn 'YYYY-MM-DD[T]HH:mm:ss.SSS[Z]' 'true'}}",
41"template": "{{dateStringFormatter node.createdOn 'YYYY-MM-DD[T]HH:mm:ss.SSS[Z]' 'true'}}"
42},
43{
44"label": "i18n:fc.om.orders.index.list.column.customer.heading",
45"template": "{{node.customer.firstName}} {{node.customer.lastName}}"
46},
47{
48"label": "i18n:fc.om.orders.index.list.column.status.heading",
49"template": "{{node.status}}"
50},
51{
52"label": "i18n:fc.om.orders.index.list.column.orderType.heading",
53"template": "{{i18n 'fc.om.order.type.'node.type _fallback=node.type}}"
54},
55{
56"label": "i18n:fc.om.orders.index.list.column.orderValue.heading",
57"template": "{{node.totalPrice}}"
58},
59{
60"label": "i18n:fc.om.orders.index.list.column.retailerName.heading",
61"template": "{{node.retailer.tradingName}}"
62}
63]
64}
65}

Using dateStringFormatter in query variables

`            "query": "query ($ref: [String], $fulfilments_first: Int, $last_update: DateTime, $last_updateUTC: DateTime) {\n  fulfilmentsLocalTime:fulfilments(first: $fulfilments_first, ref: $ref) {\n    edges {\n      node {\n        id\n        ref\n  expiryTime      createdOn\n}\n}\n}\n\n  fulfilmentsTime1:fulfilments(first: $fulfilments_first, ref: $ref, expiryTime: {to: $last_update} ) {\n    edges {\n      node {\n        id\n        ref\n  expiryTime      createdOn\n            }\n}}\n\n fulfilmentsTime2:fulfilments(first: $fulfilments_first, ref: $ref, expiryTime: {to: $last_updateUTC} ) {\n    edges {\n      node {\n        id\n        ref\n  expiryTime      createdOn\n            }\n    }\n\n   }\n}",`

` "variables": {`` "fulfilments_first": 5,`` "last_update": "{{dateStringFormatter (dateAdd day=0) 'YYYY-MM-DD[T]HH:mm:ss.SSS[Z]'}}",`

`              "last_updateUTC": "{{dateStringFormatter (dateAdd day=0) 'YYYY-MM-DD[T]HH:mm:ss.SSS[Z]' true}}"`

` }`` },`
No alt provided

Fluent OMS UI / Admin Console Date Time Format - (include UTC conversion)

Overview

Key points

Randy Chan

Contributors:

Building Blocks

By Type

Helpful Resources

Quick Links