- Notifications
You must be signed in to change notification settings - Fork9
Svelte component and action to format a timestamp using day.js
License
metonym/svelte-time
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Note:svelte-time@2.0.0 only supports Svelte 5 in Runes mode.
Usesvelte-time@1.0.0 for Svelte 3, 4, and 5 (non-Runes mode).
svelte-time is a Svelte component and action to make a timestamp human-readable while encoding the machine-parseable value in the semantictime element.
Under the hood, it usesday.js, a lightweight date-time library.
<!-- Input --><Timerelative /><!-- Output rendered in the DOM --><timetitle="May 15, 2022"datetime="2022-05-15T18:03:57.430Z"> a few seconds ago</time>
Try it in theSvelte REPL.
# npmnpm i svelte-time# pnpmpnpm i svelte-time# Bunbun i svelte-time# Yarnyarn add svelte-time
The displayed time defaults tonew Date().toISOString() and is formatted as"MMM DD, YYYY".
<script>importTimefrom"svelte-time";</script><Time />
Thetimestamp prop can be any of the followingdayjs values:string | number | Date | Dayjs.
<Timetimestamp="2020-02-01" /><Timetimestamp={newDate()} /><Timetimestamp={1e10} />
Use theformat prop to format the timestamp. Refer to thedayjs format documentation for acceptable formats.
<Timetimestamp="2020-02-01"format="dddd @ h:mm A · MMMM D, YYYY" /><Timetimestamp={newDate()}format="YYYY/MM/DD" /><Timetimestamp={1e10}format="ddd" />
Set therelative prop value totrue for the relative time displayed in a human-readable format.
<Timerelative /><Timerelativetimestamp="2021-02-02" /><Timerelativetimestamp={1e10} />
When using relative time, thetitle attribute will display a formatted timestamp.
Use theformat prop to customize theformat.
<Timerelativeformat="dddd @ h:mm A · MMMM D, YYYY" />
When usingrelative, thetime element will set the formatted timestamp as thetitle attribute. Specify a customtitle to override this.
<Timerelativetitle="Custom title" />
Set the value toundefined to omit thetitle altogether.
<Timerelativetitle={undefined} />
Setlive totrue for a live updating relative timestamp. The default refresh interval is 60 seconds.
<Timeliverelative />
To customize the interval, pass a value tolive in milliseconds (ms).
<!-- Update every 30 seconds --><Timelive={30*1_000}relative /><!-- Update every 10 minutes --><Timelive={10*60*1_000}relative />
An alternative to theTime component is to use thesvelteTime action to format a timestamp in a raw HTML element.
The API is the same as theTime component.
<script>import {svelteTime }from"svelte-time";</script><timeuse:svelteTime></time><timeuse:svelteTime={{timestamp:"2021-02-02",format:"dddd @ h:mm A · MMMM D, YYYY", }}></time>
Setrelative totrue to use relative time.
<timeuse:svelteTime={{relative:true,timestamp:"2021-02-02", }}></time><timeuse:svelteTime={{relative:true,timestamp:"2021-02-02",format:"dddd @ h:mm A · MMMM D, YYYY", }}></time>
To customize or omit thetitle attribute, use thetitle prop.
<timeuse:svelteTime={{relative:true,title:"Custom title",timestamp:"2021-02-02", }}></time><timeuse:svelteTime={{relative:true,title:undefined,timestamp:"2021-02-02", }}></time>
Similar to theTime component, thelive prop only works with relative time.
<timeuse:svelteTime={{relative:true,live:true, }}></time>
Specify a custom update interval using thelive prop.
<timeuse:svelteTime={{relative:true,live:30*1_000,// Update every 30 seconds }}></time>
Thedayjs library is exported from this package for your convenience.
Note: the exporteddayjs function already extends therelativeTime plugin.
<script>import {dayjs }from"svelte-time";let timestamp=$state("");</script><buttononclick={()=> (timestamp=dayjs().format("HH:mm:ss.SSSSSS"))}> Update {timestamp}</button>
The defaultdayjs locale is English. No other locale is loaded by default for performance reasons.
To use acustome locale, import the relevant language fromdayjs. See a list ofsupported locales.
<script>import"dayjs/locale/de";// German localeimportTime, {dayjs }from"svelte-time";</script><Timetimestamp={dayjs().locale("de")}format="dddd, MMMM D, YYYY" />
Use thedayjs.locale method to set a custom locale as the default.
<script>import"dayjs/locale/de";// German localeimport {dayjs }from"svelte-time";// Set the default locale to German.dayjs.locale("de");</script>
To use acustom timezone, import theutc andtimezone plugins fromdayjs.
<script>importutcfrom"dayjs/plugin/utc";importtimezonefrom"dayjs/plugin/timezone";importTime, {dayjs }from"svelte-time";dayjs.extend(utc);dayjs.extend(timezone);</script><Timetimestamp={dayjs("2013-11-18 11:55:20").tz("America/Toronto")}format="YYYY-MM-DDTHH:mm:ss"/>
Use thedayjs.tz.setDefault method to set a custom timezone as the default.
<script>importutcfrom"dayjs/plugin/utc";importtimezonefrom"dayjs/plugin/timezone";importTime, {dayjs }from"svelte-time";dayjs.extend(utc);dayjs.extend(timezone);dayjs.tz.setDefault("America/New_York");</script>
Use thedayjs.ts.guess method to guess the user's timezone.
importutcfrom"dayjs/plugin/utc";importtimezonefrom"dayjs/plugin/timezone";dayjs.extend(utc);dayjs.extend(timezone);dayjs.tz.guess();// America/New_York
To retrieve the abbreviated time zone, extend theadvancedFormat plugin.
import utc from "dayjs/plugin/utc"; import timezone from "dayjs/plugin/timezone";+ import advancedFormat from "dayjs/plugin/advancedFormat"; import { dayjs } from "svelte-time"; dayjs.extend(utc); dayjs.extend(timezone);+ dayjs.extend(advancedFormat);
Then, use thedayjs().local method to get the user's local time zone and format it using the"z" advanced option.
dayjs().local().format("z");// ESTdayjs().local().format("zzz");// Eastern Standard Time
| Name | Type | Default value |
|---|---|---|
| timestamp | string |number |Date |Dayjs | new Date().toISOString() |
| format | string | "MMM DD, YYYY" (Seedayjs display format) |
| relative | boolean | false |
| live | boolean |number | false |
| formatted | string | "" |
About
Svelte component and action to format a timestamp using day.js
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Uh oh!
There was an error while loading.Please reload this page.
Contributors4
Uh oh!
There was an error while loading.Please reload this page.