DatePickerビューは、日付や時刻を選択してもらうためのビューで、状態変数に値をバインドすることでユーザーが選択した値を読み取ることができる。

まずは基本的なDatePickerビューの実装コードを紹介しよう。

01
02
03
04
05
06
07
08
09
10
11
12
struct ContentView: View {
    @State var selectDate = Date()
     
    var body: some View {
        VStack {
            DatePicker(selection: $selectDate,
                       displayedComponents: [.date],
                       label: {Text("日付")})
            Text("\(selectDate)")
        }
    }
}

あらかじめ@Stateで状態変数を定義しておき、DatePickerの引数selectionで関連付けを行う。
displayedComponentsではピッカーの外観を設定するコンポーネントを配列で指定し、labelにラベルとして表示するビューを指定する。

ちなみにdisplayedComponentsのデフォルトは[hourAndMinute, date]となっており、displayedComponentsの指定を省略すると以下のようなUIとなる。

日付の選択範囲を指定する

引数inにDate型の範囲を与えることで、ピッカーで選択可能な日付の範囲を指定することもできる。

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
struct ContentView: View {
    @State var selectDate = Date()
    var from: Date {
        let format = DateFormatter()
        format.dateFormat = "yyyy-MM-dd"
        return format.date(from: "2019-05-01")!
    }
 
    var body: some View {
        VStack {
            DatePicker(selection: $selectDate,
                       in: from...Date(),
                       displayedComponents: [.date],
                       label: {Text("令和")})
            Text("\(selectDate)")
        }
    }
}

上記のコードは令和以降の日付しか選択させないようにする例だ。

iOSシミュレーターで動作確認をすると分かるが、ピッカーの表記上は2018年以前も表示されているが、選択しようとすると強制的に2019年5月1日に戻される。