Skip to content
A straightforward date and time formatter in <1kb
JavaScript Makefile
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
__test__ fix(parsing) Fix rendering Sundays Jun 3, 2017
src Fix February typo (#34) Jul 9, 2019
.babelrc Initial commit for tinytime Jan 19, 2017
.flowconfig Ignore node_modules with flow Mar 23, 2017
.gitignore Initial commit for tinytime Jan 19, 2017
.npmignore Add prepublish script Jan 24, 2017
.travis.yml Replace abandoned versions of NodeJS with the recent versions (#30) Mar 10, 2019
CHANGELOG.md
CODE_OF_CONDUCT.md Add a code of conduct (#26) Jun 20, 2017
LICENSE docs(LICENSE): add license Jun 3, 2017
Makefile Add UMD build Mar 5, 2017
README.md fixed efficiency (#31) Oct 15, 2018
package.json Add repository to package.json (#27) Jun 21, 2017
rollup.config.js Initial commit for tinytime Jan 19, 2017
yarn.lock Add publish workflow with np and conventional-changelog (#6) Mar 23, 2017

README.md

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) 1
  • 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

1 - you get padded months (09 instead of 9) by passing in the padMonth option.

const template = tinytime('{Mo}', { padMonth: true })

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>
  )
}

Babel Plugins

Using one of the plugins below, you can resolve this efficiency concern at compile time.

babel-plugin-transform-tinytime - Hoists tinytime calls out of the JSX render scope.

babel-plugin-tinytime - Hoists tinytime calls out of the current scope, regardless if its inside JSX or a ordinary function scope.

You can’t perform that action at this time.