Loading...

Customizable clock widget for your own web site

Customizable clock widget for your own web site
customizable-clock-widget-for-your-own-web-site
Want an exact clock on your own web site? Or today's date, sunrise time, sunset time or day length? Just choose from the options below and copy the code! It's free!

There are two widget scripts: A simplified version, t.js, which displays only time, and the main widget script, en.js, which can display time, date, sunrise time, sunset time and day length. The main widget script is available in several languages. For other languages, replace en in the script name with the code for the desired language. (For instance pl.js for Polish, or tr.js for Turkish.)

Parameters for the init function:

ParameterValid keywordsDefault value
templateTIME, DATE, SUNTIME
time_formathours, minutes, seconds, 12hours, AMPMhours:minutes:seconds
date_formatdayname, dname, daynum, dnum, day_in_y, week, monthname, monthnum, mnum, yy, yearyear-monthnum-daynum
sun_formatsrhour, srminute, sr12hour, srAMPM, sshour, ssminute, ss12hour, ssAMPM, dlhours, dlminutessrhour:srminute-sshour:ssminute
coordsThe location's latitude and longitude. Required for displaying sun times and day length.
idFor identifying the location and the time zone on the server side. Required if the location name contains non-ascii letters, and if you change the HTML element id.
callbackThe name of a function that will be called every second, with rendered template as parameter. (Optional)

Parameter names and keywords are case sensitive. You can use HTML and other content in the template, time_format, date_format and sun_format parameters.

Multiple clocks can be created like this:

UTC time: <span id="UTC_za00"></span><br/>
New York sunrise time: <span id="New_York_z161"></span><br/>
Tokyo sunrise time: <span id="Tokyo_z444"></span><br/>
Find the <a href="http://time.is/" id="time_is_link">current time for any location or time zone on Time.is!</a>
<script src="http://widget.time.is/en.js"></script>
<script>
time_is_widget.init({
	UTC_za00 : {},
	New_York_z161 : {
		template: "SUN",
		sun_format: "srhour:srminute",
		coords: "40.71427,-74.00597"
		},
	Tokyo_z444 : {
		coords: "59.33258,18.06490"
		}
	});
</script>

Result:

UTC time: 12:52:42
New York sunrise time: 05:26
Tokyo sunrise time: 04:27
Find the current time for any location or time zone on Time.is!

The values of the time_format, date_format, sun_format and template parameters are inherited, so you don't need to repeat them if the value is the same as for the previously defined widget.



Please see http://time.is/widgets for a customized time