SwiftUIで日付時刻を操作したい【DatePicker】

SwiftUIで日付時刻を操作したくなったのでその方法についてまとめました。

以下の環境で動作確認しています。

• Xcode Version 13.2.1
• Swift Version 5.5.2

使用方法

以下のようなコードを書くことでDatePickerを使用することができます。

第1引数にはラベルに表示する文字列を指定できます。selection引数には、Date型の変数に指定した日時がセットされます。

struct ContentView: View {
    @State private var date = Date()
    var body: some View {
        DatePicker("日時",selection: $date)
    }
}

カレンダーを表示してくれたり、ドラムロールで時刻設定ができるようになります。

表示タイプを切り替える

displayedComponents引数を指定することで表示タイプを切り替えることができます。

• 日付のみ
• 時刻のみ
• 両方（デフォルト）

日付のみ

displayedComponents引数に「.date」を指定すると日付のみ表示されます。

struct ContentView: View {
    @State private var date = Date()
    var body: some View {
        DatePicker("日付のみ",selection: $date, displayedComponents: .date)
    }
}

時刻のみ

displayedComponents引数に「.hourAndMinute」を指定すると日付のみ表示されます。

struct ContentView: View {
    @State private var date = Date()
    var body: some View {
        DatePicker("時刻のみ",selection: $date, displayedComponents: .hourAndMinute)
    }
}

日付と時刻

displayedComponents引数を指定しない もしくは、「[.hourAndMinute, .date]」を指定すると日付と時刻が表示されます。

struct ContentView: View {
    @State private var date = Date()
    var body: some View {
        DatePicker("日付と時刻",selection: $date, displayedComponents: [.hourAndMinute, .date])
    }
}