v2.3.0

Features

• add Countdown component, svelteCountdown action, and countdown attachment (1aa0aa6, #101)
• add Stopwatch component, svelteStopwatch action, and stopwatch attachment (675adbd, #102)
• add TimeRange component, svelteTimeRange action, and timeRange attachment (a7c4ce1, #103)
• add svelte-time/intl, a zero-dependency Intl-based alternative (9501461, #105)

---

New features

• Use Countdown to count down to a future instant (ticks every second by default):

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

  let to = $state(new Date(Date.now() + 20_000));
</script>

<Countdown {to} format="mm:ss" oncomplete={() => console.log("done!")}>
  {#snippet children(formatted, done)}
    {done ? "Done!" : formatted}
  {/snippet}
</Countdown>

• Use Stopwatch for a pausable count-up with built-in pause/resume bookkeeping:

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

  const since = new Date();
  let running = $state(true);
</script>

<Stopwatch {since} {running}>
  {#snippet children(formatted, isRunning)}
    {formatted}
    {isRunning ? "(running)" : "(paused)"}
  {/snippet}
</Stopwatch>

<button onclick={() => (running = !running)}>
  {running ? "Pause" : "Resume"}
</button>

• Use TimeRange to format a span between two fixed instants as two <time> elements:

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

<TimeRange start="2024-06-05" end="2024-06-10" />
<!-- Output: "Jun 05, 2024 – Jun 10, 2024" -->

<TimeRange
  start="2024-06-05T08:00:00"
  end="2024-06-05T10:00:00"
  format="h:mm A"
/>
<!-- Output: "8:00 AM – 10:00 AM" -->

• Use attachments on Svelte 5.29+ for the new primitives:

<script>
  import { countdown, stopwatch, timeRange } from "svelte-time";

  const to = new Date(Date.now() + 20_000);
  let running = $state(true);
</script>

<time {@attach countdown({ to, oncomplete: () => console.log("done!") })}></time>
<time {@attach stopwatch({ since: new Date(), running })}></time>
<span {@attach timeRange({ start: "2024-06-05", end: "2024-06-10" })}></span>

• Use svelte-time/intl when you want the same Time / TimeRange / Stopwatch / Countdown surfaces with zero dayjs dependency, backed by native Intl APIs:

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

<Time
  timestamp="2020-02-01"
  locale="de"
  options={{ dateStyle: "long" }}
/>

<Time relative live timestamp={Date.now() - 4 * 86_400_000} />