Docs
Components/Forms/DatePicker

DatePicker

Date picker with graphical, compact, and field variants. Supports validation, presets, optional dates, and date range selection.

s0 add date-picker

Usage

@State private var date = Date()

// Graphical calendar (default)
S0.DatePicker("Birthday", selection: $date)
// Compact inline row
S0.DatePicker("Reminder", selection: $date, variant: .compact)
// Field variant — tap to reveal calendar
S0.DatePicker("Due date", selection: $date, variant: .field)
// With date constraints
S0.DatePicker("Appointment", selection: $date, in: Date()...Date().addingTimeInterval(90 * 86400))
// With validation
S0.DatePicker("Start date", selection: $date, validation: .error("Must be in the future"))
// With presets
S0.DatePicker("Deadline", selection: $date, presets: [.today, .tomorrow, .nextWeek, .nextMonth])
// Optional date with placeholder and clear button
@State private var optionalDate: Date? = nil

S0.OptionalDatePicker("Expiry date", selection: $optionalDate, placeholder: "No expiry set")
// Date range picker with presets
@State private var start = Date()
@State private var end = Date()

S0.DateRangePicker("Trip dates", start: $start, end: $end, presets: [.thisWeek, .thisMonth, .last30Days])

Parameters

NameTypeDefaultDescription
labelString?nilOptional label displayed above the picker.
selectionBinding<Date>Binding to the selected date.
variantDatePickerVariant.graphicalDisplay style: .graphical (calendar), .compact (inline row), .field (tap-to-reveal).
displayedComponentsDatePicker.Components[.date]What to display: .date, .hourAndMinute, or both.
inClosedRange<Date>?nilOptional min/max date constraint.
validationDatePickerValidation.noneValidation state: .none, .error("message"), .success("message").
presets[DatePreset][]Quick-select preset buttons: .today, .tomorrow, .nextWeek, .nextMonth, or custom.