Date picker - iOS

A date picker allows the user to select a specific calendar date.

AndroidreleasedElementsreleasediOSreleasedReact 19released

iOS

AndroidElementsiOSReact 19

Inline DatePicker

A graphical calendar interface that can be embedded directly in your view hierarchy.

Syntax

Warp.DatePicker(
    date: Binding<Date>
)

Basic usage

Warp.DatePicker(date: $selectedDate)

Range Constraints

You can limit the selectable dates using different range types:

// Closed range (from-to)
Warp.DatePicker(date: $selectedDate, range: startDate...endDate)

// Partial range (from-infinity)
Warp.DatePicker(date: $selectedDate, range: startDate...)

// Partial range (infinity-to)
Warp.DatePicker(date: $selectedDate, range: ...endDate)

Dialog DatePicker

A compact date picker that can be attached to any view using a view modifier.

Syntax

 .warpDatePicker(
    date: Binding<Date>
) -> some View

Basic usage

This example shows how to attach a dialog date picker to Warp TextField using the warpDatePicker modifier + some formatting.

Warp.TextField(
    text: Binding(
        get: { formattedDate(selectedDate) },
        set: { _ in }
    ),
    placeholder: "Select a date",
    rightIcon: .calendar
)
.warpDatePicker(date: $selectedDate)

Range Constraints

Similar to the inline picker, you can constrain the selectable dates:

// Closed range
.warpDatePicker(date: $selectedDate, range: startDate...endDate)

// Partial range (from)
.warpDatePicker(date: $selectedDate, range: startDate...)

// Partial range (through)
.warpDatePicker(date: $selectedDate, range: ...endDate)

Note: The dialog picker will intercept all touch events on the view it's applied to.

Legacy support

Not supported

Parameters

Required props

Name	Type	Default	Description
date	Binding		A binding to the currently selected date.

Optional Props

Name	Type	Default	Description
range	ClosedRange|PartialRangeFrom|PartialRangeThrough		The range of selectable dates. If not provided, there is no date range restriction.

Questions?

Feel free to ask any questions on usage in the Warp DS Slack channel: #warp-design-system