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日に戻される。