Swift・SwiftUI

SwiftUIでDatePicker(UIDatePicker)を表示する手順【SwiftUI入門】

今回は、日付や時間を選択する DatePicker についてのサンプルを紹介します。

SwiftUIでDatePicker(UIDatePicker)を表示する手順

まずはイニシャライザーを確認していきましょう。複数ありますが、今回のサンプルでは以下のイニシャライザーを使っています。

DatePicker(title: StringProtocol, selection: Binding<Date>, in: ClosedRange<Date>, displayedComponents: DatePickerComponents)

title: StringProtocol は左側に表示されるラベルです。

DatePicker(title: "誕生日", ...)

selection: Binding は Date型の状態変数（@State）を指定します。

DatePicker(..., selection: $birthday, ...)

in: ClosedRange は選択できる日付の範囲を指定します。以下の場合は現在時刻以降全てという扱いになります。

DatePicker(..., in: Date()..., ...)

displayedComponents: DatePickerComponents は選択する内容を指定します。.date で日付、.hourAndMinute で時間の表示となります。配列で指定できるため、日付と時間の両方を同じ Picker で選択したい場合は [.date, .hourAndMinute] と指定することができます。

DatePicker(..., displayedComponents: .date)

最後に冒頭サンプルのソースコード全体を紹介します。

struct ContentView: View {
    
    let endDate = Calendar.current.date(byAdding: .day, value: 30, to: Date())!
    let endTime = Calendar.current.date(byAdding: .hour, value: 24, to: Date())!
    
    var dateFormatter: DateFormatter {
        let formatter = DateFormatter()
        formatter.dateStyle = .short
        return formatter
    }
    var timeFormatter: DateFormatter {
        let formatter = DateFormatter()
        formatter.timeStyle = .short
        return formatter
    }
    
    @State private var wakeupDate = Date()
    @State private var wakeupTime = Date()
    
    var body: some View {
        Form {
            DatePicker("日付を設定", selection: $wakeupDate, in: Date()...endDate, displayedComponents: .date)
            DatePicker("時間を設定", selection: $wakeupTime, in: Date()...endTime, displayedComponents: .hourAndMinute)
            Text("\(self.wakeupDate, formatter: dateFormatter) \(self.wakeupTime, formatter: timeFormatter)")
        }
    }
}

ちなみに、ドラムピッカーの選択言語は iPhone や iPad の設定に依存しますので、ソースコード上で指定することはできないようです。

以上