Components / Input controls

Time Input

Component + manager

Builds a time/date/datetime/period selection input with flexible granularity, calendar picker, optional time zone support, and more.

Preview

Usage

API reference

Live preview

Interactive example

Loading example…

Usage

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

ComponentTimeInput

Managercreate_time_input_manager

svelte

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

  const manager = create_time_input_manager({
    label: "Due date",
    format: "calendar_date",
    val: "2026-09-15",
    is_popover: true,
  })
</script>

<TimeInput {manager} />
<p>Selected date: {manager.val}</p>

API reference

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

11 entries in configuration

Property	Type	Default	Description
`label`	`string or null`	`null`	A text label displayed for the time input.
`is_popover`	`boolean`	`true`	If true, the time picker is shown in a popover when clicking a toggle button. If false, it’s displayed inline.
`format`	`string`	`time_full`	Determines the interpretation of the time object. For example, 'datetime_zoned' or 'calendar_date'. Controls which UI sections appear (calendar, hours, etc.).
`granularity_options`	`array of strings`	`["year","month","week","day","hour","minute","second"]`	Which granularities are allowed, e.g. ['day','hour','minute']. The user can select from them if `is_show_granularity_dropdown` is true.
`granularity`	`string`	`day`	Specifies the current granularity (e.g. 'day','hour','minute','second').
`val`	`object or null`	`—`	The starting value to set. `create_time_input_manager` will parse it as a time object. If null, means 'no value'.
`is_show_granularity_dropdown`	`boolean`	`false`	If true, displays a dropdown to change the time granularity.
`picker_year`	`number or null`	`current year`	The calendar’s initial highlighted year.
`picker_month`	`number or null`	`current month (1–12)`	The calendar’s initial highlighted month.
`is_disabled`	`boolean`	`false`	If true, the time input is not interactive.
`on_finish`	`function or null`	`—`	Callback called when the user finalizes (clicking 'Finish'). Receives the time value. Typically returns an object like `{ is_success: boolean, ... }`.