Fully-customizable SwiftUI date/time picker dialog. Features include:
- Optional dialog title.
- Selected date binding.
- Choose which picker component to display - date, time or both.
- Supports all SwiftUI
DatePicker
styles - default, compact, wheel and graphical. - Specify valid range of selectable dates.
- Fully cancellable - cancelation reverts date selection to the original value, from when the dialog was first displayed.
- Set dialog background color.
- Dialog-wide foreground color, affecting the title, date picker and buttons.
- Fully customizable buttons - any number, any content, any action - with default confirmation and cancellation buttons.
Examples of the dialog in action:
- Graphical-style:
- Compact-style (default):
- Wheel dialog:
- Dialog with custom buttons:
This component is distributed as a Swift package.
Use the dateTimePickerDialog
modifier on the View on top of which you want to display the dialog:
struct DateTimePickerDialogTest: View {
@State private var isShowing = true
@State private var date = Date()
let style: DateTimePickerDialog.Style
let displayComponents: DatePickerComponents
private let backgroundColor = Color.blue.opacity(0.1)
private let textColor = Color.orange
var body: some View {
List(1..<6) {
Text("\($0)")
.onTapGesture {
self.isShowing = true
}
}.dateTimePickerDialog(isShowing: $isShowing,
cancelOnTapOutside: true,
selection: $date,
displayComponents: displayComponents,
style: style,
backgroundColor: backgroundColor,
foregroundColor: textColor,
buttons: [
.default(label: "Default"),
.cancel(label: "Cancel"),
.custom(label: { Text("Call mom").foregroundColor(.red) }, action: { dialog in
})
]) {
Text("Custom label")
}
}
}
struct DateTimePickerDialogWheel_Previews: PreviewProvider {
static var previews: some View {
DateTimePickerDialogTest(style: .wheel, displayComponents: [.date, .hourAndMinute])
}
}
@available(iOS 14.0, *)
struct DateTimePickerDialogCompact_Previews: PreviewProvider {
static var previews: some View {
DateTimePickerDialogTest(style: .compact, displayComponents: [.date])
}
}