https://github.com/aweary/tinytime

⏰ A straightforward date and time formatter in <1kb
https://github.com/aweary/tinytime

date template time

Last synced: 4 days ago
JSON representation

⏰ A straightforward date and time formatter in <1kb

• Host: GitHub
• URL: https://github.com/aweary/tinytime
• Owner: aweary
• License: mit
• Created: 2017-01-19T23:37:50.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2023-01-12T05:12:08.000Z (almost 2 years ago)
• Last Synced: 2024-10-29T18:08:23.221Z (about 1 month ago)
• Topics: date, template, time
• Language: JavaScript
• Homepage:
• Size: 599 KB
• Stars: 1,337
• Watchers: 17
• Forks: 38
• Open Issues: 20
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

• awesome-tiny-js - tinytime - Simple date / time formatter: `{h}:{mm} -> 9:33`, <img align="top" height="24" src="./img/tinytime.svg"> (Dates and Time / Reactive Programming)
• awesome-hacking-lists - aweary/tinytime - ⏰ A straightforward date and time formatter in &lt;1kb (JavaScript)

README

        

# Tinytime ⏰

> A straightforward date and time formatter in <800b.



    

   

  

## 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.

```js

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.

 

 ```js

 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:

```jsx

function Time({ date }) {

  return (

    


      {tinytime('{h}:{mm}:{ss}{a}').render(date)}

    

  )

}

```


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

```jsx

const template = tinytime('{h}:{mm}:{ss}{a}');

function Time({ date }) {

  return (

    


      {template.render(date)}

    

  )

}

```


### Babel Plugins

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

[`babel-plugin-transform-tinytime`](http://npm.im/babel-plugin-transform-tinytime) - Hoists `tinytime` calls out of the JSX render scope.

[`babel-plugin-tinytime`](https://www.npmjs.com/package/babel-plugin-tinytime) - Hoists `tinytime` calls out of the current scope, regardless if its inside JSX or a ordinary function scope.