---
description: How to add and format 'Time' parts.
---

# Time

## What Are Time Parts?

'Time' parts allow you to display and format dates and times in various customizable ways. Users can choose from a variety of formats, such as DD MM YYYY, MM/DD/YYYY, YYYY-MM-DD, and many others. This flexibility enables users to represent date and time information according to their preferences or specific regional formats.

{% hint style="success" %}
**Location in the Parts Library:** Base Parts > Data Display > Time
{% endhint %}

<figure><img src="https://2904013950-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MNFsr0mZTFrCZvHflb9%2Fuploads%2FpHYy5wY9doeRpAWHPaun%2FTimeParts.png?alt=media&#x26;token=815a8f2d-ac3d-42e6-aa4b-5d6715336c7e" alt=""><figcaption><p>Example Time Parts</p></figcaption></figure>

## How Are Time Formats Useful?

There are many reasons why it is useful to have different date and time formats available.

Different users might prefer different date formats based on their region or personal habits. For example, users in the US commonly use MM/DD/YYYY, while those in many European countries, and Australia, prefer DD/MM/YYYY.&#x20;

Businesses often need to generate reports in specific date formats for consistency and compliance with regional standards.

Applications with a global user base can cater to users from different parts of the world by offering their preferred date formats.

Whether for personal use, business applications, or educational purposes, the ability to format dates and times flexibly makes the tool versatile and applicable in various scenarios.

## Understanding the Time Format

Let's take a look at how we can format a date and time - Monday 3 June, at 5:01pm. There are several different ways we can use the date format to represent this:

<table><thead><tr><th width="146"></th><th></th></tr></thead><tbody><tr><td>dddd</td><td>The full day - Monday</td></tr><tr><td>ddd</td><td>The shortened version of the day - Mon</td></tr><tr><td>dd</td><td>A more shortened version of the day - Mo</td></tr><tr><td>DD</td><td>The number of the day in the month - 03</td></tr><tr><td>D</td><td>The number of the day in the month, without any leading zeros - 3</td></tr><tr><td>MMMM</td><td>The full month - June</td></tr><tr><td>MMM</td><td>The shortened version of the month - Jun</td></tr><tr><td>MM</td><td>The number of the month - 06</td></tr><tr><td>M</td><td>The number of the month, without any leading zeros - 6</td></tr><tr><td>hh</td><td>The hour - 05</td></tr><tr><td>h</td><td>The hour, without any leading zeros - 5</td></tr><tr><td>a</td><td>Represents whether it is am or pm</td></tr></tbody></table>

For example:&#x20;

To write Monday 03 Jun 2024, 05:01 pm, the Time Format would be dddd DD MMM YYYY, hh:mm a.

## Using the Time Format in the Property Editor

To format the 'Time' part, select it to activate the property editing panel on the right, then go to Format:

<figure><img src="https://2904013950-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MNFsr0mZTFrCZvHflb9%2Fuploads%2FACahswe5HZNR4WMRSdE3%2FTimeFormatEditor.png?alt=media&#x26;token=b7687012-986e-49f5-9478-d401831ae4dd" alt=""><figcaption><p>Format Property</p></figcaption></figure>

Then key in the value to represent the time format.

<figure><img src="https://2904013950-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MNFsr0mZTFrCZvHflb9%2Fuploads%2FcPk8u1dEYjfSDD0Nlu55%2FTimeFormatting.gif?alt=media&#x26;token=d4318d6b-6705-4e19-959e-4dd83b0d7fe2" alt=""><figcaption><p>Example of Using Time Formats</p></figcaption></figure>

The time parts in the Part Library are set to have the time as 'now', meaning that whenever you add a time, the current time will be shown.&#x20;

You can override this by manually entering a value, using the Value property in the right property editing panel.&#x20;

## Styling the Time Part

Like many other parts, [colors](../../customising-and-formatting/colors-and-themes), [borders](https://appeggiohelp.gitbook.io/appeggio-help/customising-and-formatting/borders), [shadow](https://appeggiohelp.gitbook.io/appeggio-help/customising-and-formatting/shadow), [opacity](https://appeggiohelp.gitbook.io/appeggio-help/customising-and-formatting/opacity), [rounding](https://appeggiohelp.gitbook.io/appeggio-help/customising-and-formatting/rounding), and [spacing](https://appeggiohelp.gitbook.io/appeggio-help/customising-and-formatting/spacing) can be applied using the property editor on the right, once the Time part has been selected.

Similar to a [text](../../frequently-used-parts/text) part, the time part has a Font Editor, allowing you to select the font family, size, weight, line height, and style of the text.\


## Related Information

<table data-view="cards"><thead><tr><th></th><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><mark style="color:orange;">Customizing and Formatting</mark></td><td></td><td></td><td><a href="../../customising-and-formatting">customising-and-formatting</a></td></tr><tr><td><mark style="color:orange;">Text</mark></td><td></td><td></td><td><a href="../../frequently-used-parts/text">text</a></td></tr></tbody></table>
