Formatting Date and Time for Widgets
You can configure the formatting date and time in a widget using a combination of date and time formatting strings. Date and time representation varies by locale and context. Formatting enables you to localize date and time when the mashup is displayed in another language. You can also use it to control how the date and time are displayed for widgets that show date and time, such as the Date Picker and Value Display widgets. You can specify the date format in one of two ways:
• Manually by typing a format in the widget formatting property.
• Using a localization token that enables you to create and use separate date formats based on the user locale.
The supported formats are based on the Moment.js JavaScript library and are case sensitive. For more information about the library, see:
The following topic is divided into the following sections:
Supported Date Formats
The following table lists the available formats for dates.
 |
The following list applies to Web Component widgets that are available as part of the ThingWorx Web Component SDK.
|
|
Type
|
Format
|
Output
|
Example
|
|---|---|---|---|
|
Weekdays
|
d
|
Displays a range between 0 and 6, where 0 is Sunday and 6 is Saturday.
|
1
|
|
dd
|
Displays the first two letters of the day.
|
Mo
|
|
|
ddd
|
Displays the first three letters of the day.
|
Mon
|
|
|
dddd
|
Displays the full name of the day of the week.
|
Monday
|
|
|
Years
|
YY
|
Displays the year as a two-digit number with a leading zero. For example, 2009 is displayed as 09.
|
09
|
|
YYYY
|
Displays the year as a four-digit number.
|
2009
|
|
|
Months
|
M
|
Displays the month number as a range between 1 and 12, where January is 1 and December is 12.
|
1
|
|
Mo
|
Displays the month number as a range between 1 and 12 with an ordinal indicator, where January is 1st and December is 12th.
|
12th
|
|
|
MM
|
Displays the month number as a range between 01 and 12, where January is 01 and December is 12.
|
01
|
|
|
MMM
|
Displays the month as an abbreviated string.
|
Jan
|
|
|
MMMM
|
Displays the full month name as a string: January
|
January
|
|
|
Quarters
|
Q
|
Displays the quarter number as a range between 1 and 4.
|
2
|
|
Qo
|
Displays the quarter number as number between 1 and 4 with an ordinal indicator.
|
2nd
|
|
|
Days
|
D
|
Displays the day of the month as a number range between 1 and 31.
|
30
|
|
Do
|
Displays the day of the month as a number range between 1 and 31 including an ordinal indicator, where the first day is 1st and last day is 31st.
|
30th
|
|
|
DD
|
Displays The day number between 01 and 31.
|
23
|
|
|
Day of the year
|
DDD
|
Displays the day of the year as a number range between 1 and 365.
|
51
|
|
DDDo
|
Displays the day of the year as a range between 1 and 365, including an ordinal indicator, where the first day is 1st and last day is 365th.
|
51st
|
|
|
DDDD
|
Displays the day of the year as a number range between 001 and 365.
|
051
|
|
|
Week of the year
|
w
|
Displays the current week from a range of numbers between 1 and 53.
|
42
|
|
wo
|
Displays the week number as a number range between 1 and 53, including an ordinal indicator.
|
42nd
|
|
|
ww
|
Displays the current week from a range of numbers between 1 and 53. A leading zero is displayed for numbers under 10.
|
01
|
Supported Time Formats
The following table lists the available formats for time.
|
Type
|
Format
|
Output
|
Example
|
|---|---|---|---|
|
24–hour format
|
H
|
Displays hours in a 24–hour format.
|
• 0
• 23
|
|
HH
|
Displays hours in a 24–hour format, with a leading zero for values under 10.
|
• 00
• 23
|
|
|
12–hour format
|
h
|
Displays hours in a 12–hour format.
|
• 1
• 12
|
|
hh
|
Displays hours in a 12–hour format, with a leading zero for values under 10.
|
• 01
• 12
|
|
|
Minutes
|
m
|
Displays minutes.
|
• 0
• 59
|
|
mm
|
Displays minutes as two digits with a leading zero for values under 10.
|
• 00
• 59
|
|
|
Seconds
|
s
|
Displays seconds
|
• 0
• 59
|
|
ss
|
Displays seconds with a leading zero.
|
• 00
• 59
|
|
|
AM/PM
|
a
|
Displays a lowercase AM and PM abbreviations when using a 12–hour format.
|
• am
• pm
|
|
A
|
Displays uppercase AM and PM abbreviations when using a 12–hour format.
|
• AM
• PM
|
|
|
Millieseconds
|
SSS
|
Displays one thousandth of a second.
|
001
|
|
Centiseconds
|
SS
|
Displays one hundredth of a second.
|
01
|
|
Deciseconds
|
S
|
Displays one tenth of a second.
|
1
|
|
Timezone offset
|
Z
|
Displays the Coordinated Universal Time (UTC)offset for the current time zone.
|
+3:00
|
|
ZZ
|
The UTC offset for the current time zone without the colon separator.
|
+300
|
Using Date and Time Separators
You can use any punctuation character as a separator between different time and date units:
• , (comma)
• . (period)
• : (colon)
• - (dash)
• / (slash)
You can also separate units by leaving an empty space.
Examples of Using Date and Time Formats
You can combine the available time and date formats to display the date according to your requirements. For example, to display the date and time as:
Use the following format:
DD-MM-YYYY hh:mm:ss
Where:
• DD represents the day: 11
• MM represents the month: 10
• YYYY represents the year: 2020
• hh:mm:ss represents the time in 12–hour format: 12:00:00
You can also add square brackets around strings to format the date as sentences or phrases. For example, the following figure shows a date within the Date Picker widget:
dddd [the] Do [of] MMMM [at] hh:mm:ss a
where:
• ddd represents the day as a string: Sunday
• Do represents the day number with an ordinal indicator: 11th
• MMMM represents the month name: October
• hh:mm:ss represents the time: 12:00:00
• a represents the AM/PM in lowercase: am
To abbreviate quarter names as Q1, Q2, Q3, and Q4, type:
[Q]Q
where[Q] is a string and Q represent the number of the quarter.
Creating Localization Tokens for Date and Time Formatting
Localization tokens enable you to convert date formats automatically based on the current locale of the user. To add a localization token for date format, perform the following steps:
1. In Composer, open a Default localization table.
2. On the Localization Tokens tab, click Add. A side panel appears.
3. In the Name box, type the token name. This name is used as a reference when you add tokens for other languages.
4. In the Token Value box, type the data and time format to use for the current language. The Default table sets the format for the English language.
5. Make note of the localization token name that you have typed, click 
to add the token and close the panel, and then Save. The localization token is added to the table.
to add the token and close the panel, and then Save. The localization token is added to the table.6. Repeat steps 1 through 5 to define the date and time format for each language that you want to change. Use the token name that you specified in the Default table as a reference when you create tokens for other tables.
The localization token is now defined with a specific format for each language. To set the localization token, do the following:
1. In Mashup Builder, select a widget that supports date and time formatting, and then open the Properties panel.
2. Click 
next to a date and time format property to select from the list of the available tokens on the server.
next to a date and time format property to select from the list of the available tokens on the server.3. In the box, enter the token name that you have created in the previous procedure.
4. Click Save to save the mashup.
The localization token is now used to set the property value, and the date format changes automatically based on the current locale of the mashup.
You can set the date and time format for some widgets using the widget configuration dialog box. For example, to configure the format for a Value Display widget, click Renderer and State next to the ValueFormat property. In the dialog box, select DATETIME under Renderer. You can use this dialog box to configure date and time for other widgets such as Grid Advanced.
For more information about localization tables and tokens, see Localization Tables.