Package Exports

svelte-time

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (svelte-time) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

svelte-time

Svelte component and action to format a timestamp using day.js

This utility wraps the date-time library day.js in a declarative Svelte component and action.

Use cases

format a timestamp with the semantic time element
display a human-readable, relative time (e.g., "4 days ago")

Try it in the Svelte REPL.

Installation

Yarn

yarn add -D svelte-time

NPM

npm i -D svelte-time

Usage

Time component

The displayed time defaults to new Date().toISOString() and is formatted as "MMM DD, YYYY".

<script>
  import Time from "svelte-time";
</script>

<Time />

The timestamp prop can be any of the following dayjs values: string | number | Date | Dayjs.

<Time timestamp="2020-02-01" />

<Time timestamp="{new Date()}" />

<Time timestamp="{1e10}" />

Use the format prop to format the timestamp. Refer to the dayjs format documentation for a list of available formats.

<Time timestamp="2020-02-01" format="dddd @ h:mm A · MMMM D, YYYY" />

<Time timestamp="{new Date()}" format="YYYY/MM/DD" />

<Time timestamp="{1e10}" format="ddd" />

Relative time

Set the relative prop value to true for the relative time displayed in a human-readable format.

<Time relative />

<Time relative timestamp="2021-02-02" />

<Time relative timestamp="{1e10}" />

Live updates

Set live to true for a live updating relative timestamp. The default refresh interval is 60 seconds.

<Time live relative />

To customize the interval, pass in a value (milliseconds) to live.

<!-- Update every 10 minutes -->
<Time live="{10 * 60 * 1000}" relative />

svelteTime action

Use the svelteTime action to format a timestamp in a raw HTML element.

<script>
  import { svelteTime } from "svelte-time";
</script>

<time use:svelteTime />

<time
  use:svelteTime="{{
    timestamp: "2021-02-02",
    format: "dddd @ h:mm A · MMMM D, YYYY",
  }}"
/>

<time
  use:svelteTime="{{
    relative: true,
    timestamp: "2021-02-02",
  }}"
/>

Similar to the Time component, the live prop only works with relative time.

<time
  use:svelteTime="{{
    live: true,
    relative: true,
  }}"
/>

Custom locale

Load a custom locale and set it as the default locale using the dayjs.locale API.

<script context="module">
  import "dayjs/esm/locale/de";
  import dayjs from "dayjs/esm";

  dayjs.locale("de"); // German locale
</script>

<script>
  import Time from "svelte-time";
</script>

<Time />

API

Props

Prop name	Value
timestamp	`string` \| `number` \| `Date` \| `Dayjs` (default: `new Date().toISOString()`)
format	`string` (default `"MMM DD, YYYY"`) dayjs docs
relative	`boolean` (default: `false`)
live	`boolean` \| `number` (default: `false`)
formatted	`string` (default `""`)

TypeScript

Svelte version 3.31 or greater is required to use this component with TypeScript.

TypeScript definitions are located in the types folder.

Changelog

CHANGELOG.md

License

MIT