Purpose
A controller that displays a countdown clock to a specified date/time.
| Target | Purpose | Default |
|---|
years (Optional) | The target to display the number of years left in the countdown | - |
months (Optional) | The target to display the number of months left in the countdown | - |
days (Optional) | The target to display the number of days left in the countdown | - |
hours (Optional) | The target to display the number of hours left in the countdown | - |
minutes (Optional) | The target to display the number of minutes left in the countdown | - |
seconds (Optional) | The target to display the number of seconds left in the countdown | - |
| Class | Purpose | Default |
|---|
countingDown (Optional) | The class to apply while the countdown is running | - |
ended (Optional) | The class to apply when the countdown has ended | - |
| Value | Type | Description | Default |
|---|
deadline | Date | The date/time to count down to | - |
removeUnused | Boolean | Whether to remove unused targets. i.e. if there are no years in the countdown | false |
padZeros | Boolean | Whether to pad the countdown values for hours, minutes, and seconds with zeros i.e. "06" instead of "6" | true |
Events
| Event | When | Dispatched on | event.detail |
|---|
countdown:ended | When the countdown ends | The controller root element | - |
Side Effects
The controller will set an interval using setInterval. Cleans up on disconnect and countdown end.
How to Use
The deadline date can be changed at any point, during ticking or after a countdown has expired and the clock will restart with the new value.