# Time

The Time graphic is perfect for showing timers.

## Types of timers

There are multiple types of timers that an be used within H2R Graphics

### Current Date/Time

This can be used as a classic Time of Day display for your production.

### To Time of Day

Choose an end time within the current day and count down to it.

### Countdown

Choose an amount of time. Start at that time and count down to 0.

### Count up

Choose an amount of time. Start from 0 and count up to that chosen time.

Additionally you can set a custom start time. Perfect for things like sports where you might want to start counting from 45:00 and count up to 90:00.

## Display format

The Display format input allows you to decide how a timer should display.

![Editing an Time graphic](https://487176000-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mgpg8bODu8UEZd66d9q%2Fuploads%2FmFzNSLXqvi1i1tzqeDBn%2FScreenshot%202022-04-12%20at%2012.06.58.png?alt=media\&token=f0a058b5-0b6b-4c72-baf3-3ee957796d71)

**For example:**

`HH:mm:ss` - Will display `13:30:00` on a Current Date/Time graphic.

`h:mm:ss` - Will display 1:30:00 on the same Current Date/Time graphic.

### Formating

Here are a few more helpful formatting options.

|                               | Display                                |
| ----------------------------- | -------------------------------------- |
| H                             | 0 1 2 ... 22 23                        |
| HH                            | 00 01 02 ... 22 23                     |
| h                             | 0 1 2 ... 11 12                        |
| hh                            | 00 01 02 ... 11 12                     |
| m                             | 0 1 ... 58 59                          |
| mm                            | 00 01 ... 58 59                        |
| s                             | 0 1 ... 58 59                          |
| ss                            | 00 01 ... 58 59                        |
| A                             | AM PM                                  |
| a                             | am pm                                  |
| ddd                           | Mon                                    |
| dddd                          | Monday                                 |
| MMM                           | Jan                                    |
| MMMM                          | January                                |
| dddd, MMMM Do YYYY, h:mm:ss a | Sunday, February 14th 2023, 3:25:50 pm |

{% hint style="info" %}
H2R Graphics makes use of the popular Moment.js library. [Explore more formating options here](https://momentjs.com/docs/#/displaying/).
{% endhint %}

### Escaping text

You can also type text into the Display format input that will show up on the timer.

A good example for this would be `1hr 10min 40sec`.

Use the square brackets `[ and ]` on your keyboard to do this.

![Custom text in a timer](https://487176000-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mgpg8bODu8UEZd66d9q%2Fuploads%2FM4ttTQJegZtWb6vP6CO7%2FScreenshot%202022-04-12%20at%2014.06.55.png?alt=media\&token=2d3d1c05-9ca0-40ba-8bfa-607a37583879)

In the example about, the text has been escaped using the brackets.
