Time formatter web component package.

Usage

Install libraries from npm

npm i @nick_durnev/time-formatter

npm i lit

or add links to CDN

<script type="importmap">
  {
    "imports": {
      "lit": "https://cdn.jsdelivr.net/npm/[email protected]/+esm",
      "time-formatter": "https://unpkg.com/@nick_durnev/[email protected]/dist/index.js"
    }
  }
</script>

Add tag in you markup with any ISO 8601 timestamp string. This component will format timestamp on click in 3 forms:

• Relative date (2 days ago);
• Time (15:26);
• Short date (Mar 29), shows year only if passed year isn't current;

<date-formatter>2023-03-29T12:25:07.427Z</date-formatter>

You can pass in it 2 attributes - locale and timezone to define time correctly for your region. If you pass uncorrect attributes - componnet will use locale and timezone from your browser.

<date-formatter locale="uk-UA" timezone="Europe/Kiev"
  >2023-03-29T12:25:07.427Z</date-formatter
>
//It will work too
<date-formatter locale="qwe" timezone="111"
  >2023-03-29T12:25:07.427Z</date-formatter
>

If you will not pass this attributes - don't worry all will be fine. Web component take them from your browser.

You can use format functions separately from web component. Just import them in your JS file in this way.

{
  formatRelativeTime,
  formatToShort,
  formatToTime,
} from "https://unpkg.com/@nick_durnev/[email protected]/dist/indexjs";

Examples of usage

formatRelativeTime("2023-04-04T18:24:10.427Z", "en-GB");
//will return "10 seconds ago"
formatToShort("2022-04-10T22:32:20.427Z", "en-GB", "Europe/Kiev");
//will return "11 Apr 22"
formatToTime("2023-03-29T20:25:07.427Z", "en", "America/Los_Angeles");
//will return "1:26 PM"

Development

npm start

Run web dev server.

npm run test

Run tests for functions.

npm run coverage

Run coverage report for tests.

npm run build

Create build in dist directory based on vite.config.js file .