The CountdownTimer component is used to display the remaining time:
- Until the end of the current period (based on marketing data from the backend)
- Until a specific static date (set as the
targetparameter of the component) - Custom periodicity set on the frontend (
custom-periodicality+custom-period-start)
Usage Examples:
<div>
<h3 class="mt-8">Automatically set to the end of the current period</h3>
<ui-countdown-timer></ui-countdown-timer>
<h3 class="mt-8">Statically set target in local time (not recommended)</h3>
<ui-countdown-timer target="2026-02-05T17:00:00"></ui-countdown-timer>
<h3 class="mt-8">Statically set target in Bangkok / Novosibirsk Time Zone</h3>
<ui-countdown-timer target="2026-02-05T17:00:00.000+07:00"></ui-countdown-timer>
<h3 class="mt-8">Statically set target in UTC (hide days/seconds)</h3>
<ui-countdown-timer target="2026-02-05T00:00:00.000Z"
:hide-seconds="true" :hide-days="true"></ui-countdown-timer>
<h3 class="mt-8">With Text Above</h3>
<ui-countdown-timer>
<template #default="params">
<div v-if="params.currentPeriodLabel">
{{ params.currentPeriodLabel }}
</div>
<div>
Until the end of the current period
</div>
</template>
</ui-countdown-timer>
<h3 class="mt-8">With Text Below</h3>
<ui-countdown-timer>
<template #below="params">
<pre>
currentPeriodLabel: {{ params.currentPeriodLabel }}
calculatedTargetDate: {{ params.calculatedTargetDate }}
timeLeft: {{ params.timeLeft }}
</pre>
</template>
</ui-countdown-timer>
<h3 class="mt-8">Custom period: monthly</h3>
<ui-countdown-timer custom-periodicality="monthly"
custom-period-start="2024-01-01T10:00:00.000+07:00">
<template #below="params">
<div>
currentPeriodLabel: {{ params.currentPeriodLabel }}
</div>
<div>
calculatedTargetDate: {{ params.calculatedTargetDate }}
</div>
</template>
</ui-countdown-timer>
<h3 class="mt-8">Custom period: weekly</h3>
<ui-countdown-timer custom-periodicality="weekly"
custom-period-start="2025-01-01T10:00:00.000+07:00">
<template #below="params">
<div>
currentPeriodLabel: {{ params.currentPeriodLabel }}
</div>
<div>
calculatedTargetDate: {{ params.calculatedTargetDate }}
</div>
</template>
</ui-countdown-timer>
</div>
Overriding Timer Style/Color:
Individual parts of the timer use the following CSS classes:
To override them, simply add the following code to your theme settings or global CSS:
.countdown-time {
background-color: green !important;
}
| Prop | Default | Type | Description |
| target | — | String | Static target date in ISO format |
| hide-seconds | false | Boolean | Hides the seconds section if set to true |
| hide-days | false | Boolean | Hides the days section if set to true |
| custom-periodicality | — | String | Custom periodicity: "monthly" or "weekly" |
| custom-period-start | — | String | Start date for custom periodicity in ISO format |
Note: All settings can be customized either from the admin panel by manually
editing the code or from within the back office by clicking on the cog icon
in the upper left corner of the page (only accessible when the "Online office
admin" flag is present).