Comment on page

# Component

`ends-on (string)`

- String representing the utc date and time to which the clock counts down.

`format (string)`

- String representing the format in which the countdown clock should display the time left on the clock. The string can contain the following symbols:
- Days
- {d}...{/d}: a group related to the number of days left
- [d]: the number of days left
- [0,0]: the full label representing "days": by default "days"
- [0,1]: the smaller label representing "days": by default "days"
- [0,2]: the smallest label representing "days": by default "d"

- Hours
- {h}...{/h}: a group related to the number of hours left
- [h]: the number of hours left
- [1,0]: the full label representing "hours": by default "hours"
- [1,1]: the smaller label representing "hours": by default "hrs"
- [1,2]: the smallest label representing "hours": by default "h"

- Minutes
- {m}...{/m}: a group related to the number of minutes left
- [m]: the number of minutes left
- [2,0]: the full label representing "minutes": by default "minutes"
- [2,1]: the smaller label representing "minutes": by default "min"
- [2,2]: the smallest label representing "minutes": by default "s"

**Seconds**- {s}...{/s}: a group related to the number of seconds left
- [s]: the number of seconds left
- [3,0]: the full label representing "seconds": by default "seconds"
- [3,1]: the smaller label representing "seconds": by default "sec"
- [3,2]: the smallest label representing "seconds": by default "s"

*Examples*

`"[s] [3,0]"`

: x seconds`"[m] [2,0]"`

: x hours`"[h] [1,0]"`

: x hours`"[d] [0,0]"`

: x days`"{d}[d] [0,0] {\d}{h}[h] [1,0] {\h}{m}[m] [2,0] {\m}[s] [3,0]"`

: x days y hours z minutes v seconds`"{d}[d] [0,1], {\d}{h}[h] [1,1], {\h}{m}[m] [2,1] [4,0] {\m}[s] [3,1]"`

: x days, y hours, z minutes and v seconds`"{d}[d] [0,1] {\d}{h}[h] [1,1] {\h}{m}[m] [2,1] {\m}[s] [3,1]"`

: x days y hrs z min v sec`"{d}[d] [0,1], {\d}{h}[h] [1,1], {\h}{m}[m] [2,1] [4,0] {\m}[s] [3,1]"`

: x days, y hrs, z min and v sec`"{m}[m] [2,0] [4,0] {\m}[s] [3,0]"`

: x minutes and y seconds`"{m}[m] [2,1] [4,0] {\m}[s] [3,1]"`

: x min and y sec`"{h}[h] [1,0] {\h}{m}[m] [2,0] [4,0] {\m}[s] [3,0]"`

: x hours, y minutes and z seconds`"{h}[h] [1,1] {\h}{m}[m] [2,1] [4,0] {\m}[s] [3,1]"`

: x hrs, y min and z sec`"[d]d:[h]h:[m]m:[s]s"`

: xd:yh:zm:vs`"[d]:[h]:[m]:[s]"`

: x:y:z:v`"{d}[d] [0,2] {\d}, {h}[h] [1,2] {\h}, {m}[m] [2,2] {\m}, [s] [3,2]"`

: xd, yh, zm, vs

`days (string)`

- Optional, custom label used to represent days.
- The full label, smaller and smallest label are separated by comma.
- The default value is: "days, days, d"

`hours (string)`

- Optional, custom label used to represent hours.
- The full label, smaller and smallest label are separated by comma.
- The default value is: "hours, hrs, h"

`minutes (string)`

- Optional, custom label used to represent minutes.
- The full label, smaller and smallest label are separated by comma.
- The default value is: "minutes, min, m"

`seconds (string)`

- Optional, custom label used to represent seconds.
- The full label, smaller and smallest label are separated by comma.

The default value is: "seconds, sec, s"

Last modified 5mo ago