How it works
DatePickerStyleConfiguration is the value SwiftUI hands to a custom DatePickerStyle so it can rebuild a date picker's appearance from the pieces SwiftUI has already resolved. When you write a type conforming to DatePickerStyle, its makeBody(configuration:) method receives this configuration, which carries the picker's label along with the resolved date and range state. Reach for it whenever the built-in styles aren't enough and you want full control over how a DatePicker is laid out, while still letting SwiftUI manage the underlying selection and validation.
Receive the configuration in makeBody(configuration:)
A
DatePickerStyleconformance implementsmakeBody(configuration:), and SwiftUI passes an instance ofDatePickerStyleConfigurationas theconfigurationargument. That single value is your entry point to everything the style needs; inBorderedDatePickerStylethe method returnssome Viewassembled entirely from it.Place the picker's text with the label property
The
labelproperty is a type-erased view holding whatever title was supplied at the call site, so you decide where the caption sits and how it reads. The example pulls outconfiguration.labeland applies.font(.headline)above the control, rather than letting the default style position it.Rebuild the control with DatePicker(_:)
DatePickeroffers an initializer that takes aDatePickerStyleConfigurationdirectly, reconstructing a working picker bound to the same date selection without re-declaring the binding. HereDatePicker(configuration)produces the live control, and.labelsHidden()suppresses its built-in label since the style already drew one fromconfiguration.label.Wrap the reconstructed picker in your own chrome
Because
makeBodyreturns an ordinary view, you can compose the configuration's parts inside any container and decorate them freely. The example arrangesconfiguration.labeland the rebuiltDatePickerin aVStack, then adds.padding()and an.overlaywith aRoundedRectanglestroke to give the picker its bordered look.Apply the style with datePickerStyle(_:)
A custom style takes effect when you attach it to a
DatePickerwith the.datePickerStyle(_:)modifier. Inbody, the standardDatePicker("Reminder", selection: $date, displayedComponents: .date)receives.datePickerStyle(BorderedDatePickerStyle()), which is what causes SwiftUI to callmakeBody(configuration:)and supply theDatePickerStyleConfiguration.
.font(.headline) off configuration.label and instead apply a tint by adding .foregroundStyle(.blue) to it, then watch the same label text restyle while the rebuilt DatePicker(configuration) keeps working unchanged.Example & preview
Press Run live & edit to compile it in your browser — then edit the Swift on the left and the preview re-renders live.
struct DatePickerStyleConfigurationDemo: View {
struct BorderedDatePickerStyle: DatePickerStyle {
func makeBody(configuration: DatePickerStyleConfiguration) -> some View {
VStack(alignment: .leading) {
configuration.label
.font(.headline)
DatePicker(configuration)
.labelsHidden()
}
.padding()
.overlay(
RoundedRectangle(cornerRadius: 8)
.stroke(.blue, lineWidth: 1)
)
}
}
@State private var date = Date()
var body: some View {
DatePicker("Reminder", selection: $date, displayedComponents: .date)
.datePickerStyle(BorderedDatePickerStyle())
.padding()
}
}