Skip to content
forked from aweary/tinytime

A straightforward time and time formatter in <1kb

Notifications You must be signed in to change notification settings

kazupon/tinytime

 
 

Repository files navigation

Tinytime ⏰

A straightforward date and time formatter in <800b.

npm travis

API

tinytime exports a single function that returns a template object. This object has a single method, render, which takes a Date and returns a string with the rendered data.

import tinytime from 'tinytime';
const template = tinytime('The time is {h}:{mm}:{ss}{a}.');
template.render(new Date());
// The time is 11:10:20PM.

Substitutions

  • MMMM - Full Month (September)
  • MM - Partial Month (Sep)
  • Mo - Numeric Month (9)
  • YYYY - Full Year (1992)
  • YY - Partial Year (92)
  • dddd - Day of the Week (Monday)
  • DD - Day of the Month (24)
  • Do - Day (24th)
  • h - Hours - 12h format
  • H - Hours - 24h format
  • mm - Minutes (zero padded)
  • ss - Seconds (zero padded)
  • a - AM/PM

Efficiency

tinytime takes an approach similar to a compiler and generates an AST representing your template. This AST is generated when you call the main tinytime function. This lets you efficiently re-render your template without tinytime having to parse the template string again. That means its important that you aren't recreating the template object frequently.

Here's an example showing the right and wrong way to use tinytime with React.

Don't do this:

function Time({ date }) {
  return (
    <div>
      {tinytime('{h}:{mm}:{ss}{a}').render(date)}
    </div>
  )
}

Instead, only create the template object once, and just re-render it.

const template = tinytime('{h}:{mm}:{ss}{a}');
function Time({ date }) {
  return (
    <div>
      {template.render(date)}
    </div>
  )
}

Note: this could be done automatically with a fairly strightforward babel plugin if any wanted to build that... Learn how to do that here

About

A straightforward time and time formatter in <1kb

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 97.7%
  • Makefile 2.3%