---
tags:
- UI Page widgets
alias: user-guide-uipage-widgets-date-and-time
widgetname: Date & Time
description: "This documentation details customizing a date and time widget’s appearance and display options"
---

# Date & Time

![dateAndTimeIcon](images/uiDateTime.png)

## 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](images/uiPageExample6.png)

## General Steps

{% include-markdown 'includes/pages/ui_widgets_general_steps.md' %}

![dateAndTimeGeneral](images/dateandtime_general.png)

## 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.](images/dateandtime_style.png)

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](images/dateandtime_setup.png)

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

    ![dateAndTimeLinks](images/dateandtime_links.png)

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