Skip to content

Date & Time#

dateAndTimeIcon

Overview#

The Date & Time widget displays the date and time. An example is shown below, where a Date & Time widget is used on the right to keep the time.

dateAndTimeExample

General Steps#

To use the Date & Time widget in a UI Page, follow the steps below:

  1. In any UI Page in Build mode, select the Date & Time from the widgets list located on the left side of the page; drag and drop to the desired place in the UI Page.
  2. Enter the Settings section of the widget through the three vertical dots.
  3. In the General tab, provide a name and a description for the widget. Use the toggle buttons to specify whether the widget should be visible, display the header, or allow full screen mode. Additionally, determine if the widget can be opened as an image in a new tab or exported as an image.

dateAndTimeGeneral

Widget Customization#

  1. Optionally, in the Style tab, you can customize the appearance of the widget with the following properties:

    • Border Width - Choose from the available options to set the thickness of the border: Thinner, Thin, Medium, Thick, and Thicker.
    • Border Color - Select the color for the border using the color picker or by entering RGB coordinates.
    • Font - Choose the desired font type for the date and time displayed within the widget.
    • Font Size - Set the size of the text. Options include Extra Small, Small, Normal, Large, Extra Large, and Dynamic (which adjusts based on the widget's size).
    • Font Color - Select the color for the text using the color picker or by entering RGB coordinates.
    • Background Color - Choose the background color for the widget using the color picker or by entering RGB coordinates.
    • Horizontal Alignment - Align the text horizontally within the widget. Options include Center, Left, and Right.
    • Vertical Alignment - Align the text vertically within the widget. Options include Middle, Top, and Bottom.

    Screenshot showing a UI customization options for vertical alignment of text within a widget, with available options listed as Middle, Top, and Bottom.

  2. In the Setup tab, enter the time and date formats as well as the time zone and other display options:

    • Show Time - Determine whether to display the time. This option is set to true by default.
    • Show Date - Determine whether to display the date. This option is set to true by default.
    • Show Time Zone - Determine whether to display the time zone. This option is set to false by default.
    • Time Format - Specify the format of the time display. This field is mandatory if Show Time is enabled. The available options are: Short (hh:mm) or Long (hh:mm:ss).
    • Date Format - Specify the format of the date display. This field is mandatory if Show Date is enabled. The available options are: Short (Wkd, dd-mmm-aaaa), Long (Weekday, Month Day, Year), or Current Week (Start Of Week Month/Day/Year - End Of Week Month/Day/Year).
    • Use Specific Time Zone - Choose whether to use a specific time zone. If not selected, the current GUI time zone will be used.
    • Time Zone - Specify the time zone to use. This field is mandatory if Use Specific Time Zone is enabled.

    dateAndTimeSetup

  3. Optionally, define the Links between this widget and other elements of the UI Page.

    dateAndTimeLinks

  4. By saving and closing the Settings, the widget will be changed accordingly.