Interactive previews iPhone
DatePicker Colors
Customizing the colors of the date picker
Platform Compatibility
iOS 13.0+ iPadOS 13.0+ macOS 10.15+ watchOS 10.10+ visionOS 1.0+
Tags
SwiftUI Code
@State var date = Date()
var body: some View {
DatePicker("Select Date", selection: $date)
.tint(.red)
}Found an issue or have a suggestion?
Created: June 4, 2025Updated: December 27, 2025
More DatePicker Components
View all
Future DatePicker
Creates an instance that selects multiple dates on or after some start date
StepperFieldDatePickerStyle
A system style that displays the components in an editable field, with adjoining stepper that can increment/decrement the selected component
WheelDatePickerStyle
A date picker style that displays each component as columns in a scrollable wheel
Explore Other Components
Browse all
Toolbar Title Alignment
Sets the preferred alignment of the navigation bar’s title. The navigation bar resolves the alignment of its title automatically based on context, and toolbar roles. Use this modifier to override that resolution.
Capsule Text Field
Gives your text field a capsule shape. This only has a visible effect on macOS, where the capsule shape is not the default.
