Components / Data & content

Time

Component + manager

Displays a formatted time value with options for text color customization, format, granularity, and timezone adjustments.

Preview

Usage

API reference

Live preview

Interactive example

Loading example…

Usage

Import the component and its manager, then make it your own.

ComponentTime

Managercreate_time_manager

svelte

<script>
  // Import the shared stylesheet once in your application's root layout.
  import "sveltekit-ui/style.css"
  import { Time, create_time_manager } from "sveltekit-ui"

  const manager = create_time_manager({
    val: "2026-09-15",
    format: "calendar_date",
    display_format: "calendar_date",
  })
</script>

<p>Due: <Time {manager} /></p>

API reference

Configure the manager, call its methods, and read its reactive state.

6 entries in configuration

Property	Type	Default	Description
`val`	`string or null`	`null`	The input value representing a date or time, in ISO 8601 format or any other recognizable format.
`format`	`string or null`	`null`	The input format of the `val` for parsing the date/time.
`granularity`	`string or null`	`null`	Defines the level of detail to display (e.g., 'minute', 'hour').
`timezone`	`string or null`	`null`	Specifies the timezone for displaying the time (e.g., 'UTC', 'America/New_York').
`display_format`	`string or null`	`null`	Defines how the time should be displayed (e.g., 'calendar_date' for YYYY-MM-DD).
`text_color`	`CSS color or null`	`null`	The color of the displayed time text.