在 SwiftUI 中,DatePicker 表單控制元件讓我們可以創建一個…日期選擇器。

它是如何運作的呢?

首先,我們創建一個 Date 型別的屬性:

@State private var dateChosen = Date()

我們使用 @State 來讓我們能夠從 DatePicker 視圖中修改這個值。

然後,我們將這個屬性連接到 DatePicker 視圖:

DatePicker(selection: $dateChosen, in: ...Date()) {
    Text("選擇日期和時間")
}

它的外觀如下所示:

點擊不同的部分(日期或時間)將會顯示專用的選擇器界面元素:

以下是這個例子的完整程式碼:

struct ContentView: View {
    @State private var dateChosen = Date()

    var body: some View {
        Form {
            DatePicker(selection: $dateChosen, in: ...Date()) {
                Text("選擇日期和時間")
            }
        }
    }
}

你可以選擇只顯示日期的特定元素,使用 displayedComponents 屬性,例如只顯示日期:

DatePicker(selection: $dateChosen, in: ...Date(), displayedComponents: .date) {
    Text("選擇日期和時間")
}

或者只顯示時間:

DatePicker(selection: $dateChosen, in: ...Date(), displayedComponents: .hourAndMinute) {
    Text("選擇日期和時間")
}