Components

DatePicker

Select a date or time using the browser’s native input.

Example

Requires React 18.2+ or 19 and shared styles. See setup.

Default

Loading preview…

Code
'use client';
import { useState } from 'react';
import { DatePicker } from '@swiftuijs/ui';
import { VStack } from '@swiftuijs/ui';
import { Text } from '@swiftuijs/ui';
const ControlledDateDemo = () => {
    const [date, setDate] = useState('2026-04-10');
    return (<VStack spacing={16}>
      <Text>Selected: {date}</Text>
      <DatePicker aria-label="Controlled date" selection={date} onSelectionChange={setDate} mode="date"/>
    </VStack>);
};
export default function Example() {
    return (<ControlledDateDemo />);
}

Usage and limitations

  • Controlled: selection and onSelectionChange; uncontrolled: defaultSelection. React aliases are value, defaultValue, and onValueChange. onChange receives the native event.
  • date uses YYYY-MM-DD, time uses HH:MM, and dateAndTime uses YYYY-MM-DDTHH:MM. The browser localizes display, not the stored string.
  • displayedComponents={['date', 'hourAndMinute']} selects dateAndTime; a single component selects its respective mode.
  • min/max use the same native string format. minuteInterval sets native step for time/date-time modes; disabled is a native input prop.
  • Provide a visible label or aria-label; test native picker behavior on your target mobile browsers.

More examples

Uncontrolled Usage
Date and Time
SwiftUI-Style Components
Minute Interval

API reference

PropTypeRequiredDescription
selectionstringNoSwiftUI-style alias for the current native input value.
valuestringNoThe current native input value.
defaultSelectionstringNoSwiftUI-style alias for the initial uncontrolled value.
defaultValuestringNoThe initial native input value when uncontrolled.
onChangeChangeEventHandler<HTMLInputElement>NoNative input change handler.
onSelectionChange(value: string) => voidNoSwiftUI-style value-first change handler.
onValueChange(value: string) => voidNoValue-first change handler for SwiftUI-style ergonomics.
minstringNoThe minimum selectable value, expressed in the same native input format as `value`.
maxstringNoThe maximum selectable value, expressed in the same native input format as `value`.
minimumDatestringNoBackward-compatible minimum alias for SwiftUI-style callers.
maximumDatestringNoBackward-compatible maximum alias for SwiftUI-style callers.
modeDatePickerModeNoThe display mode of the date picker. Default: 'date'
displayedComponentsDatePickerDisplayedComponent[]NoSwiftUI-style displayed components. When provided, these values determine the native input type.
minuteIntervalnumberNoSwiftUI-style minute granularity for time-based pickers.
disabledbooleanNoWhether the date picker is disabled. Default: false

Inherits additional props from Omit< IBaseElementComponent<'input'>, 'type' | 'value' | 'defaultValue' | 'onChange' | 'children' | 'min' | 'max' >.

Edit this page on GitHubReport an issue

ControlGroup

ControlGroup clusters related actions under a shared label. The component keeps SwiftUI's grouped-control mental model while using standard web grouping semantics.

DefaultScrollAnchor

DefaultScrollAnchor adapts SwiftUI's `defaultScrollAnchor` modifier into an explicit wrapper.