Date & Time
The Date & Time datasource is always available in Smartsign and can be bound to text fields in any template or layout, regardless of other datasources that are used.
This makes it easy to display clocks, dates, weekdays, or week numbers on your screens without requiring additional configuration.
How it works
The Date & Time datasource outputs the current time information based on the format and settings you choose. Smartsign provides four preset values that you can use directly or customize:
- Current Time
- Current Date
- Current Day
- Current Week
Each preset can be formatted using a DateTime format string, allowing you to control exactly how the date or time is displayed.
Create date & time template
Date & time elements are included in many templates and screen layouts by default, but you can always create your own if you need a specific design or additional time zones.
In this example, we will create a template that displays two different time zones.
- Go to Templates and select Create New
- Enter a name and description, then click create
- Start by adjusting the template settings such as size and
background color
Add elements for the first time zone
Add the text boxes that will display your Date & Time values:
- Headline
- Current day - Use a preset or apply a custom format using
the token tables
- Current time
- Day, Month, Year - This text box will use a custom DateTime
format string
Add design elements (optional)
You can enhance your design by adding shapes such as boxes or circles.
- Click the Shape button to add a design element to the template
- Position the shape where you want it.
The Layers panel controls which elements appear in front or behind others — items higher in the list appear on top.
- Adjust the shape using background color, rounded corners, borders,
shadows, or other style options to fit your design
Duplicate the first timezone-group
Once the first time zone layout is complete, you can group the elements and duplicate them to create a second time zone with the same design.
-
Select all layers in the Layers panel and click Group Layers
-
You can now select the entire group to resize or reposition everything at once.
Renaming the group and its layers can make them easier to identify later.
-
Use Copy/Paste on your keyboard to duplicate the group.
This preserves all styles and settings for the new time-zone block.
-
tip
Copy/paste can also be used for individual items, which is very useful when multiple elements share the same formatting.
-
-
Update the fields in the second group by selecting the appropriate name and time zone in the datasource settings
Final adjustments
Make any additional adjustments to the template, such as alignment,
spacing, background images, or other visual components
- Use Preview to verify that the correct live data is shown for
both time zones
- Save the template. It is now ready to be published on a screen.
Configuration options
When binding the Date & Time datasource to a text field, the following settings are available:
| Setting | Description | Example |
|---|---|---|
| Date format | Input a "DateTime format string" to control how the date/time is presented | YYYY-MM-DD |
| Time zone | Select which time zone to use for the displayed date/time | Europe/Kiev |
| Language | Select which language to use for the date/time | English |
DateTime format strings
A DateTime format string defines how the final date or time should
appear.
Format strings use tokens to represent each part of a date, such as
year, month, day, hour, or week number.
Smartsign uses the Moment.js formatting standard and you can find some common examples in the following tables.
For a full list of supported tokens, please refer to the official documentation: https://momentjs.com/docs/#/displaying/format/.
Year
| Token | Output | Result |
|---|---|---|
| YYYY | Full year | 2025 |
| YY | Two-digit year | 25 |
Month
| Token | Output | Result |
|---|---|---|
| MM | Month number (01–12) | 03 |
| M | Month number (1–12) | 3 |
| MMMM | Full month name | March |
| MMM | Short month name | Mar |
Day
| Token | Output | Result |
|---|---|---|
| DD | Day of month (01–31) | 09 |
| D | Day of month (1–31) | 9 |
| dddd | Full weekday name | Monday |
| ddd | Short weekday name | Mon |
| d | Weekday number (0–6, Sunday = 0) | 1 |
Time
| Token | Output | Result |
|---|---|---|
| HH | Hour (00–23) | 03 |
| H | Hour (0–23) | 3 |
| hh | Hour (01–12) | 02 |
| h | Hour (1–12) | 2 |
| mm | Minutes (00–59) | 07 |
| m | Minutes (0–59) | 7 |
| ss | Seconds (00–59) | 05 |
| s | Seconds (0–59) | 5 |
| a | am/pm | pm |
| A | AM/PM | PM |
Week
| Token | Output | Result |
|---|---|---|
| W | ISO week number | 1 |
| WW | ISO week number (two digits) | 01 |
Combined examples
| DateTime format string | Result |
|---|---|
| dddd, MMMM Do | Monday, March 4th |
| HH:mm | 14:37 |
| YYYY-MM-DD HH:mm | 2024-03-04 14:37 |
| MMM DD, YYYY - h:mm A | Mar 04, 2024 - 2:37 PM |
| dddd [week] W | Monday week 11 |