Countdown Ended
Countdown
This element dynamically shows the missing time to a fixed date.
The element that will be dynamically updated is the one with class [<span class="class-tag">]countdown[</span>] in your navigator. It is marked with the custom attribute, do not remove it!
The value is the ending date of the countdown expressed in UTC format.
Along the widget wrapper you will find other subparts:
Countdown Wrapper
This element wraps all the time related subparts where you can add days, hours, minutes and seconds. It is defined by the attribute:
Inside this wrapper you will find several elements:
Days
Days left to the end of the countdown
Hours
Hours left to the end of the countdown
Minutes
Minutes left to the end of the countdown
Seconds
Seconds left to the end of the countdown
You can use all elements or not, the choice is up to you! The countdown will automatically adjust itself to the proper data.
E.g: if you have the days element, hours will count up to 24.
Countdown End
This element will be visible only when the countdown is expired, you can add everything you want inside this element, that is defined with the attribute:
Dynamic Year
This element dynamically shows the currenty year, in this way you are not forced to update the date manually every time.
The element that will be dynamically updated is the one with class [<span class="class-tag">]current-year[</span>] in your navigator. It is marked with the custom attribute, do not remove it!
Current Localized Date
This element dynamically shows the current date localized in the browser format.
The element that will be dynamically updated is the one with class [<span class="class-tag">]current-date[</span>] in your navigator. It is marked with the custom attribute, do not remove it!
The widget can be further configured with different custom attributes, see below for further configurations
Can be obtained by applying the following custom attribute:
The possible values for this attribute are:
- [<span class="class-tag">]full[</span>]
- [<span class="class-tag">]long[</span>]
- [<span class="class-tag">]medium[</span>]
- [<span class="class-tag">]short[</span>]
Can be obtained by applying the following custom attribute:
The possible values for this attribute are:
- [<span class="class-tag">]full[</span>]
- [<span class="class-tag">]long[</span>]
- [<span class="class-tag">]medium[</span>]
- [<span class="class-tag">]short[</span>]
Can be obtained by applying the following custom attribute:
The possible values for this attribute are:
- [<span class="class-tag">]full[</span>]
- [<span class="class-tag">]long[</span>]
- [<span class="class-tag">]medium[</span>]
- [<span class="class-tag">]short[</span>]
Can be obtained by applying the following custom attribute:
The possible values for this attribute are:
- [<span class="class-tag">]full[</span>]
- [<span class="class-tag">]long[</span>]
- [<span class="class-tag">]medium[</span>]
- [<span class="class-tag">]short[</span>]
Can be obtained by applying the following custom attribute:
The possible values for this attribute are:
- [<span class="class-tag">]numeric[</span>]. E.g: 2022
- [<span class="class-tag">]2-digit[</span>] E.g: 22
Can be obtained by applying the following custom attribute:
The possible values for this attribute are:
- [<span class="class-tag">]long[</span>]. E.g: March
- [<span class="class-tag">]short[</span>] E.g: Mar
- [<span class="class-tag">]narrow[</span>] E.g: M
- [<span class="class-tag">]numeric[</span>]. E.g: 3
- [<span class="class-tag">]2-digit[</span>]. E.g: 03
-
Can be obtained by applying the following custom attribute:
The possible values for this attribute are:
- [<span class="class-tag">]long[</span>]. E.g: Thursday
- [<span class="class-tag">]short[</span>] E.g: Thu
- [<span class="class-tag">]narrow[</span>] E.g: T
Can be obtained by applying the following custom attribute:
The possible values for this attribute are:
- [<span class="class-tag">]numeric[</span>]. E.g: 1
- [<span class="class-tag">]2-digit[</span>] E.g: 01
Can be obtained by applying the following custom attributes:
Naturally this is just an example, you can combine Year, Month, Weekday and Day attributes as you wish
Current Localized Time
This element dynamically shows the current date localized in the browser format.
The element that will be dynamically updated is the one with class [<span class="class-tag">]current-time[</span>] in your navigator. It is marked with the custom attribute, do not remove it!
The widget can be further configured with different custom attributes, see below for further configurations
Timezone can be changed to show up time in a specific zone instead of the browser local time, usefull if you want to show up a comparison between your office hours and local time.
The possible values for this attribute are timezone names included in the Time Zone Database (iana.org)
For example:
[<span class="class-tag">]America/New_York[</span>]
[<span class="class-tag">]Asia/Shanghai[</span>]
You can change the hour format by using the following attribute:
The possible values for this attribute are:
- [<span class="class-tag">]numeric[</span>]. E.g: 3
- [<span class="class-tag">]2-digit[</span>]. E.g: 03
Whether to use 12-hour time (as opposed to 24-hour time).
The possible values for this attribute are:
- [<span class="class-tag">]true[</span>]. E.g: 15
- [<span class="class-tag">]false[</span>]. E.g: 03
You can change the minute format by using the following attribute:
The possible values for this attribute are:
- [<span class="class-tag">]numeric[</span>]. E.g: 3
- [<span class="class-tag">]2-digit[</span>]. E.g: 03
You can change the seconds format by using the following attribute:
The possible values for this attribute are:
- [<span class="class-tag">]numeric[</span>]. E.g: 3
- [<span class="class-tag">]2-digit[</span>]. E.g: 03
Can be obtained by applying the following custom attributes:
Naturally this is just an example, you can combine Timezone, minute, hour, hour-12, and seconds attributes as you wish