Timer

Timer is a gadget for wikis that displays a countdown timer.

Summary

Does your wiki feature in-game season, battle passes, in-game events? Put this gadget on your wiki for users to track to see when a season/event starts or ends. This is a functionality gadget, so we recommend adding it as default-hidden.

Installation instructions

Note: If gadget is enabled by default, it will only apply to users who have accounts. If you'd like it to be visible to non-accounts, you will need to convert it to non-gadget and apply the .js to your MediaWiki:Common.js.

1. You need to be a local/community admin on your wiki to follow these steps, since it involves editing pages in the MediaWiki namespace.
2. Copy the source code to your wiki. This includes the contents of the following pages:
   • MediaWiki:Gadget-timer.js
3. Copy the contents of MediaWiki:Gadget-timer to your wiki. This is the translation string that will display when people look at information about the gadget, so you can modify it if needed.
4. At MediaWiki:Gadgets-definition on your wiki, APPEND ONE of the following three options, depending on what config option you want.
   • * timer[ResourceLoader|default|hidden|type=general]|timer.js = it's available to everyone with no opt-out ability (RECOMMENDED)
   • * timer[ResourceLoader|default|type=general]|timer.js = it's available to everyone but you can opt out in your user page
   • * timer[ResourceLoader|type=general]|timer.js = by default it's not turned on, but you can turn it on in settings
5. You may have to wait somewhere between 5 and 15 minutes at this time for server-side cache to update.
6. Done! Make sure you cache refresh on your browser (Ctrl+F5) on the upload page to see changes.

Templates

These templates are needed for the gadget to work properly.

CountdownTime

Template name: Countdown

Displays a countdown to the specified time, updated by javascript in [[MediaWiki:Gadget-timer.js]].

Parameters:
;time : UTC time to count down to, in YYYY-MM-DD HH:MM format, e.g. 2001-02-03 04:05 for 5 minutes past 4am on February 3rd, 2001.
;expired : Text to display instead of the countdown if the specified time is already in the past.
;intro : (Optional) Text introducing the countdown.
;class : (Optional) CSS classes to apply to the outer container.
;hide-days : (Optional) If "yes" is passed, only hours/minutes/seconds will be displayed.
;style, digit-style, digit-value-style, digit-label-style : (Optional) CSS styles to apply to the outer container, days/hours/minutes/seconds containers, displayed numbers, and labels respectively.

Script/template designed by [[User:Pcj]] from https://warcraft.wiki.gg/wiki/MediaWiki:Common.js

<onlyinclude><div class="jst-countdown {{{class|}}}" style="text-align:center; {{{style|}}}" data-jst-time="{{{time|2020-01-01 01:01}}}" data-jst-text-over="{{{expired|}}}">{{#if:{{{intro|}}}|<div style="padding: 0 0 2ex 0">{{{intro}}}</div>}}
{{#ifeq:{{{hide-days}}}|yes||<div class="jst-days" style="display: inline-block; {{{digit-style|width: 5em}}}"><div class="jst-value" style="{{{digit-value-style|font-size: 2em}}}"></div><div class="jst-label" style="text-align: center; {{{digit-label-style|}}}"></div></div>}}
<div class="jst-hours" style="display: inline-block; {{{digit-style|width: 5em}}}"><div class="jst-value" style="{{{digit-value-style|font-size: 2em}}}"></div><div class="jst-label" style="text-align: center; {{{digit-label-style|}}}"></div></div>
<div class="jst-minutes" style="display: inline-block; {{{digit-style|width: 5em}}}"><div class="jst-value" style="{{{digit-value-style|font-size: 2em}}}"></div><div class="jst-label" style="text-align: center; {{{digit-label-style|}}}"></div></div>
<div class="jst-seconds" style="display: inline-block; {{{digit-style|width: 5em}}}"><div class="jst-value" style="{{{digit-value-style|font-size: 2em}}}"></div> <div class="jst-label" style="text-align: center; {{{digit-label-style|}}}"></div></div>
</div></onlyinclude><noinclude>[[Category:Templates]]</noinclude>

Template name: Time

Presents UTC time (either absolute points or ranges), localised by javascript in [[MediaWiki:Gadget-timer.js]] to the browser's time zone.

Provide the following parameters:
; date : Required - UTC Date in YYYY-MM-DD format, e.g. "2042-02-12" for the 12th of February, 2042.
; start : Required - UTC Time in HH:MM 24-hour format, e.g. 23:59 for one-minute-before-midnight.
; end : Optional - Interval endpoint: UTC Time in HH:MM 24-hour format.
; end-date : Optional - Interval endpoint: UTC Date in YYYY-MM-DD format.
; anchor : Optional - Anchor time: UTC Date/Time in YYYY-MM-DD HH:MM format.

If <code>|end=</code> is not provided, a single time is displayed. If <code>|end=</code> is specified, the times are displayed as a range; <code>|end-date=</code> defaults to <code>|date=</code> if not specified.

'''Important:''' start and end-points of an interval should generally be within 12 hours of each other, as the <code>end-date</code> is not displayed to the reader. The start date is displayed unless it matches the anchor time in the local time zone, or today's date (if no anchor time is specified).

Examples:
: <code><nowiki>{{time|20:00|2000-01-01}}</nowiki></code> &rarr; {{time|20:00|2000-01-01}}
: <code><nowiki>{{time|start=20:00|date=2000-01-01}}</nowiki></code> &rarr; {{time|start=20:00|date=2000-01-01}}
: <code><nowiki>{{time|start=20:00|date=2000-01-01|end=21:00}}</nowiki></code> &rarr; {{time|start=20:00|date=2000-01-01|end=21:00}}

Script/template designed by [[User:Pcj]] from https://warcraft.wiki.gg/wiki/MediaWiki:Common.js

<onlyinclude><span class="jst-abstime" data-jst-time="{{{date|{{{2}}}}}} {{{start|{{{1}}}}}}" data-jst-time2="{{{end-date|{{{date|{{{2}}}}}}}}} {{{end}}}" data-jst-anchor="{{{anchor|}}}">{{{start|{{{1}}}}}}{{#if:{{{end|}}}|&nbsp;– {{{end}}}}} UTC</span></onlyinclude><noinclude>

[[Category:Templates]]</noinclude>

See also

• Example wikis:
  • Apex Legends Wiki
  • Warcraft Wiki