Time Selector

Represents a Material UI styled time selector for picking time values.

Overview

The Time Selector provides a Material Design style time selector for selecting time, presented as a modal overlay. It’s ideal for forms or settings where time selection is required. It adapts to different screen sizes and orientations, offering a flexible interface for time selection.

To use the timeSelector modifier, apply it to any View with the required parameters.

Modifier

Presents a time selector with a binding to control the presentation state and a binding to manage the selected time.

timeSelector(isPresented:Binding<Bool>, selection: Binding<Date>)

Parameters

Parameter
Description

isPresented

A binding to control the presentation state of the time selector.

selection

A binding to manage the selected time.

Example

@State private var isTimeSelectorPresented: Bool = false
@State private var selectedTime: Date = Date()

var body: some View {
    Container {
        Switch("Show Time Selector", isOn: $isTimeSelectorPresented)
    }
    .timeSelector(isPresented: $isTimeSelectorPresented, selection: $selectedTime)
}

Last updated