A Polymer timer element. Have your variables updated with the current time in a fixed interval.

Description

The kc-timer is a Polymer element which fills bound variables with timer values like:

timestamp, milliseconds, seconds, minutes, hours, day, month, year and date

You can choose any combination of these values and set a specific interval to update the variables.

There is also a timer event you can listen to.

Source

The kc-timer project is hosted on GitHub.

Install package

You can install the package from Bower.io and add this element to your project:

$ bower install kc-timer

To use the bower command, you'll need some dev tools first:

1. Git
2. Node.js

Install both and then run this command to install bower to the global node cache:

$ npm install -g bower

See the offical bower help for more details.

Demo

Find the complete demo source here: Demo on GitHub

This will give you data-bound variables for each possible timer property. Note that you'll need to set the output property for each value that should be updated.

You also need to enable the timer via the active property. You may set this through code or data-binding, too.

Finally the fire-on-activate attribute, will ensure, that the timer is fired once it is activated. Otherwise it will take one timer cycle to set the bound variables.

<kc-timer interval="1000" 
	timestamp="{{ts}}" 
	milliseconds="{{ms}}"
	seconds="{{sec}}"
	minutes="{{min}}"
	hours="{{hr}}"
	day="{{dow}}"
	date="{{dat}}"
	month="{{mon}}"
	year="{{y}}"
	output="ts,ms,sec,hr,min,dow,dat,mon,y" 
	active
	fire-on-activate>
</kc-timer>

The full demo uses these variables to output them and it looks like this: