Template:Digital clock

File:LED colon.pngFile:LED digit 4.pngFile:LED digit 0.png

Template documentation[view] [edit] [history] [purge]

This template displays a digital clock.

Usage

1. To use this template, place the following on the page - {{Digital clock}}.
2. This template should never be substituted.
3. This template should be purged to reflect current time.
4. If your area follows DST, you will have to change the time manually.

Parameters

All parameters given below are optional and not necessarily be used.

{{Digital clock
|format = 12 or 24 (default: 24)
|offset = number of hours + or - UTC (default: 0)
|size = width of each digit in pixels (default: 70)
|color = any color name or HTML color code (default: red)
}}

Offset

The clock has a parameter that allows you to give an offset from UTC time. The offset can be fractional to adjust the time by any number of hours and minutes. Therefore this code - {{Digital clock|offset = +5.5}} will produce this clock:

File:LED digit 8.pngFile:LED colon.pngFile:LED digit 0.png

Format (12 or 24 hours)

You can set the format parameter to 12 or 24 to get a 12 or 24 hour time format! 12 hour clocks get an additional segment space for displaying am/pm. Therefore {{Digital clock|format = 12}} will produce:

File:LED colon.pngFile:LED digit 4.pngFile:LED digit 0.pngFile:LED pm.png

Size

You can set nearly all sizes for the clock to display. It defaults to 70x112px. To set a size of 20 pixels you will have to type {{Digital clock|size = 20}} and it will display something like this:

Error creating thumbnail: Error creating thumbnail: File:LED colon.pngFile:LED digit 4.pngFile:LED digit 0.png

Color

You can set all types of colors for the clock to display. It defaults to red. You can use a HTML color code or directly write the color name. To display a clock with cyan color you will have to type {{Digital clock|color = cyan}} and it will display something like this:

File:LED colon.pngFile:LED digit 4.pngFile:LED digit 0.png

Borders

This is actually not a parameter but a way to design different types of borders for the clock. Normal HTML can be used to add borders and padding space. One tricky bit is that <div> elements expand to the full width of their container, which will make the box too wide. So we must specify an exact width for it, by multiplying the segment size by 5 (for 24-hour clocks) or 6 (for 12-hour clocks): A complete list of borders is available at the User Page Design Center

<div style="background:black; padding:5px 15px; border:3px inset cyan; width:300px;"> {{Digital clock}} </div>

<div style="background:black; padding:5px 15px; border:3px inset cyan; border-radius:15px; width:300px;"> {{Digital clock}} </div>

Vertical clocks

Wrapping the clock in a <div> with the same width as the segments will make it vertical. Borders work as normal. The vertical clock isn't displayed to prevent inconvenience but this code works perfectly.

<div style="float:right; width:40px; border:5px solid black"> {{Digital clock}} </div>

Random colors

Parser magic can be used to pick a random color each time the page is generated. Use the following code to pick random colors from the colors specified. Note - You can change the colors given according to your preference. This code will produce the clock given below. {{Digital clock |color = {{#switch:{{#expr:{{#time:U}} mod 6}} |0=red |1=orange |2=lime |3=yellow |4=cyan |5=magenta}}

Error creating thumbnail: Error creating thumbnail: File:LED colon.pngFile:LED digit 4.pngFile:LED digit 0.png

See also

For the magic words with the same or similar names, see MediaWikiWiki:Help:Magic words § Date and time.

Multiple units of time

Type	Adjustable	Current	Last	Next
Date and time	{{time}}	{{Currentdate}} (MDY) {{Plain now}} (DMY) {{Now}} (DMY in a complete sentence) {{Simple now}}
Date only	{{Dateonly}} {{Datedow}} (Has the day of the week)	{{Date}} (Chose format) {{TODAY}} (DMY)	{{Yesterday}} {{Day-1}}	{{Tomorrow}} {{Day+1}}
Month and year only		{{Monthyear}} {{DATE}} (prefixed by date=)	{{Monthyear-1}}	{{Monthyear+1}}
Time only	{{Timeonly}}	{{CURRENTTIME}} (12 h format) {{CURRENTTIME24}} (24 h format)
Banners		{{Right now}} (Blue with time and number of Wikipedia articles)
Timestamp		{{Timestamp}} (Format YYYYMMDDhhmmss)

Single units of time

Unit of time	Adjustable	Current	Last	Next
Second		{{CURRENTSECOND}}
Minute		{{CURRENTMINUTE}}
Hour		{{CURRENTHOUR}}
Week		{{CURRENTWEEK}} {{CURRENTWEEKOFMONTH}}
Day of Week	{{DAYOFWEEK}}	{{CURRENTDAYNAME}} {{CURRENTWEEKDAYABBREV}} {{CURRENTWEEKDAY}}
Month	{{MONTHNAME}} {{MONTHABBREV}} {{MONTHNUMBER}} {{MONTH}} (zero padded)	{{CURRENTMONTHNAME}} {{CURRENTMONTHABBREV}} {{CURRENTMONTH1}} {{CURRENTMONTHDAYS}}	{{LASTMONTHNAME}}	{{NEXTMONTHNAME}}
Day of Month		{{CURRENTDAY}} {{CURRENTDAY2}} (zero padded)
Year		{{CURRENTYEARCC}} {{CURRENTYEARYY}} {{CURRENTISOYEAR}} {{CURRENTYEAR}}	{{LASTYEAR}}	{{NEXTYEAR}}
Day of Year		{{CURRENTDAYOFYEAR}}
Decade	{{DECADE}}	{{CURRENTDECADE}}
Century	{{Century}}	{{CURRENTCENTURY}}
MILLENNIUM	{{MILLENNIUM}}

Date and time templates made for substitution

• {{Last month (short)}} produces May
• {{Next month (short)}} produces Jul
• {{Last month}} produces May 2026
• {{Next month}} produces July 2026

Parser functions

• mw:Special:MyLanguage/time permits a custom time specifier string, similar to the C date and time functions

Individual templates

• {{Calendar}}
• {{Calendar clock with Wikipedia stats}}
• {{Clock}}
• {{Digital clock}}
• {{Digital clock and date}}
• {{Infobox calendar date today}}

Categories of templates

• Category:Time, date and calendar templates
• Category:Date-computing templates
• Category:Date-computing templates based on current time
• Category:ISO date templates
• Category:Calendar templates

The above documentation is transcluded from Template:Digital clock/doc. (edit | history)
Editors can experiment in this template's sandbox (create | mirror) and testcases (create) pages.
Add categories to the /doc subpage. Subpages of this template.