DatePicker in SwiftUI
DatePicker-Steuerelemente sind seit vielen Jahren in den meisten grafischen Frameworks enthalten und im Jahr 2020 wurde SwiftUI um ein Element zur Auswahl von Datum und Uhrzeit erweitert. Es ist eine gern gesehene Neuerung, denn die Wahl eines Datums ist keineswegs eine triviale Aufgabe. Leicht kann durch Unachtsamkeit ein Datum gewählt werden, dass nicht existiert. Außerdem gibt es in verschiedenen Ländern für ein Datum unterschiedliche Schreibweisen. Ein Steuerelement, das Fehler verhindert und einen Großteil der Arbeit übernimmt, ist zweifellos eine gute Idee. Der DatePicker von SwiftUI kann auf verschiedene Arten konfiguriert werden. Entweder wird über einen eingeblendeten Kalender ein Datum zur Auswahl angeboten, oder es ist eine Uhrzeit, die vom Nutzer gewählt werden kann. In beiden Fällen ist die Programmierung nahezu identisch. Nur für den Parameter displayedComponents wird ein anderer Wert übergeben. Mit date wird der Kalender angezeigt, mit hourAndMinute wird die Auswahl der Uhrzeit möglich. Als ersten Parameter benötigt der DatePicker bei der Instanziierung ein Variable vom Typ Date, die an das Steuerelement gebunden wird.
struct DatePickerView: View {
@State private var selectedDate = Date()
var body: some View {
VStack {
Text("DatePicker für ein Datum")
.font(.title2)
DatePicker(selection: $selectedDate, displayedComponents: .date) {
Text(„Wähle ein Datum")
}.padding()
Text("DatePicker für eine Uhrzeit")
.font(.title2)
DatePicker(selection: $selectedDate, displayedComponents: .hourAndMinute) {
Text(„Wähle eine Uhrzeit")
}.padding()
Spacer()
}
}
}
Optional kann über einen weiteren Parameter der Bereich eingeschränkt werden, in aus dem das Datum gewählt werden kann. Die Angabe von Date()… erlaubt ausschließlich die Auswahl von aktuellen Datum und zukünftigen Daten. Eine Angabe von …Date() ermöglich nur die Wahl des heutigen Datums und der Vergangenheit.
Text("DatePicker für ein Datum")
.font(.title2)
DatePicker(selection: $selectedDate, in: Date()... , displayedComponents: .date) {
Text("Wähle ein Datum")
}.padding()
Um einen Date Typ in einen formatierten Text umzuwandeln, kann man sich in SwiftUI der DateFormatter-Klasse bedienen. Dort kann über die Eigenschaften dateStyle und timeStyle genau definiert werden, wie der konvertierte Text aussehen soll.
struct DatePickerView: View {
@State private var selectedDate = Date()
var dateFormatter: DateFormatter {
let formatter = DateFormatter()
formatter.dateStyle = .medium
formatter.timeStyle = .medium
return formatter
}
var body: some View {
VStack {
Text("DatePicker for date")
.font(.title2)
DatePicker(selection: $selectedDate, displayedComponents: .date) {
Text("Select a date")
}.padding()
Text("DatePicker for time")
.font(.title2)
DatePicker(selection: $selectedDate, displayedComponents: .hourAndMinute) {
Text("Select a time")
}.padding()
Text("Date is \(selectedDate, formatter: dateFormatter)")
.padding()
Spacer()
}
}
}
Geschrieben am: 21.10.2020 Technologien: Swift, SwiftUI, macOS, iOS