Interactive previews iPhone

DatePicker Components

A date picker with only one displayed component

DatePicker Components  - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview

Platform Compatibility

iOS 13.0+ iPadOS 13.0+ macOS 10.15+ watchOS 10.0+ visionOS 1.0+

Tags

SwiftUI Code

Docs
@State var date = Date()

var body: some View {
    VStack {
        DatePicker("Select Date", selection: $date, displayedComponents: .date)
        DatePicker("Select Date", selection: $date, displayedComponents: .hourAndMinute)
    }
}

Found an issue or have a suggestion?

Created: June 4, 2025Updated: December 27, 2025

More DatePicker Components

View all
Future DatePicker - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview
initializer

Future DatePicker

Creates an instance that selects multiple dates on or after some start date

MultiDatePicker - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview
initializer

MultiDatePicker

A control for picking multiple dates.

DatePicker Colors - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview
style

DatePicker Colors

Customizing the colors of the date picker

FieldDatePickerStyle - macOS - Flat Design - Light Mode - Preview
style

FieldDatePickerStyle

A date picker style that displays the components in an editable field

StepperFieldDatePickerStyle - macOS - Flat Design - Light Mode - Preview
style

StepperFieldDatePickerStyle

A system style that displays the components in an editable field, with adjoining stepper that can increment/decrement the selected component

WheelDatePickerStyle - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview
style

WheelDatePickerStyle

A date picker style that displays each component as columns in a scrollable wheel

GraphicalDatePickerStyle - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview
style

GraphicalDatePickerStyle

A date picker style that displays an interactive calendar or clock

Hour Minute Seconds DatePicker - watchOS - Flat Design - Light Mode - Preview
initializer

Hour Minute Seconds DatePicker

A DatePicker for just hour, minute, and second.

Explore Other Components

Browse all
Button Tint - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview
style

Button Tint

Sets the buttons tint color

Music Picker - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview
modifier

Music Picker

Presents a music picker to select items from the Apple Music catalog and the user’s music library.

Swipe Action - iOS on iPhone - Portrait - Flat Design - Light Mode - Preview
modifier

Swipe Action

Adds custom swipe actions to a row in a list.

GroupBox Background - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview
modifier

GroupBox Background

Set a custom GroupBox background

Button Styles - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview
style

Button Styles

A type that applies standard interaction behavior and a custom appearance to all buttons within a view hierarchy

Menu Divider - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview
content

Menu Divider

A Menu with a Divider

Compact List Section Spacing - iOS on iPhone - Portrait - Flat Design - Light Mode - Preview
modifier

Compact List Section Spacing

Compact spacing between sections

List Section Margins - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview
modifier

List Section Margins

Set the section margins for the specific edges.