Skip to main content
The SvelteDate class provides a reactive wrapper around JavaScript’s Date object. When you call methods that modify the date, Svelte’s reactivity system is automatically notified.

​
Import

import { SvelteDate } from 'svelte/reactivity';

​
Usage

​
Basic usage

<script>
  import { SvelteDate } from 'svelte/reactivity';

  const now = new SvelteDate();

  function addDay() {
    now.setDate(now.getDate() + 1);
  }
</script>

<p>Current date: {now.toLocaleDateString()}</p>
<button onclick={addDay}>Add 1 day</button>

​
Clock example

<script>
  import { SvelteDate } from 'svelte/reactivity';

  const time = new SvelteDate();

  $effect(() => {
    const interval = setInterval(() => {
      time.setTime(Date.now());
    }, 1000);

    return () => clearInterval(interval);
  });
</script>

<p>Current time: {time.toLocaleTimeString()}</p>

​
Notes

  • All mutating methods trigger reactivity (setDate, setHours, etc.)
  • Reading methods work like normal Date (getDate, getHours, etc.)
  • Inherits all methods from the standard Date object
  • More efficient than using $state() with a Date object

​
See also