tinydate

tinydate + Preact demo

by Luke Edwards

HTML

<script src="https://unpkg.com/[email protected]"></script>
<script src="https://unpkg.com/tinydate"></script>

Babel + JSX

const { h, render } = preact; /** @jsx h */

const showtime = tinydate('The time is: {HH}:{mm}:{ss}!');
const fulltime = tinydate('{YYYY}-{MM}-{DD} {HH}:{mm}:{ss}');

const Time = ({ date }) => (
  <time datetime={ fulltime(date) }>{ showtime(date) }</time>
);

let root;
function draw() {
	root = render(<Time date={ new Date() } />, document.body, root);
}

setInterval(draw, 1000);

draw();