Copy page

Components

DateWheelPicker

src/lib/components/date-dropper/date-wheel-picker.svelte

Purpose

A popover-based date (and optional time) picker that uses scrollable wheel pickers instead of a calendar grid. It returns a CalendarDate (date-only) or CalendarDateTime (date + time) from @internationalized/date. When time is enabled, a timezone selector lets the user pick any IANA timezone. Use it where a wheel-style picker is preferred over a calendar, or where timezone selection matters.

Origin

Custom — Primebrick-written. Composes Popover, Tabs, WheelPicker primitives, and @internationalized/date.

Usage

Date only

Code
<DateWheelPicker bind:value={birthDate} placeholder={$t('common.selectDate')} />

Date and time

Set includeTime to render hour/minute/second wheels and a timezone selector. The bound value becomes a CalendarDateTime.

Code
<DateWheelPicker bind:value={scheduledAt} includeTime />

Date and time with default time

Pass defaultTime as an HH:MM:SS string to pre-fill the time wheels when the user opens the popover without an existing value.

Code
<DateWheelPicker
  bind:value={eventStart}
  includeTime
  defaultTime="09:00:00"
/>

Two-way timezone binding

The timezone prop is bindable and reflects the selected IANA timezone string.

Code
<DateWheelPicker bind:value={meetingAt} bind:timezone={selectedTz} includeTime />

Props

Full prop table: see API reference — date-wheel-picker.

Key props: value (bindable CalendarDate | CalendarDateTime), placeholder (string, default translated "Select date"), includeTime (boolean, default false), defaultTime (string HH:MM:SS, optional), timezone (bindable string, IANA timezone, defaults to browser-resolved timezone).

Next steps

• Component catalog
• UI stack
• API reference