DatePickerは日付と時間を選択するための専用Viewです。
環境
この記事の情報は次のバージョンで動作確認しています。
【Swift】5.2
【iOS】13.4.1
【macOS】Catalina バージョン 10.15.4
基本的な使い方
|
1 2 3 |
DatePicker("ラベル", selection: $selection) |
テキストタイプのラベルを使う基本的な使い方です。
引数（selection）には、選択値と連携するDate型のプロパティを指定します。
プロパティ値が変更できるように、@State等で宣言されている必要があります。
頭に$が付いているのは、プロパティの値ではなく参照を渡し、DatePickerが値を更新可能にする意味があります。
使用例
|
1 2 3 4 5 6 7 8 9 |
struct ContentView: View { @State private var selectionDate = Date() // Date構造体の生成、初期値は現在日時 var body: some View { DatePicker("日時を選択", selection: $selectionDate) } } |
テキスト以外のラベルを使う場合
ラベルにテキスト以外のViewを使う場合は、次のイニシャライザを使います。
|
1 2 3 4 5 |
DatePicker(selection: $selection) { // ラベルを表すView並びを記述 } |
「ラベルを表すView並びを記述」の箇所は、@ViewBuilderで定義されているので、複数のViewを並べて記述できます。
ここ記述されたViewは画面上横並びに配置されます。
VStack()等を使った、レイアウトの指定も可能です。
使用例
|
1 2 3 4 5 6 7 8 9 10 11 12 |
struct ContentView: View { @State private var departureDate = Date() var body: some View { DatePicker(selection: $departureDate) { Image(systemName: "airplane") Text("出国日時") } } } |
ラベルの自由な配置
DatePickerの標準ラベルはレイアウトの柔軟性に乏しいので、自由にラベルを配置したい場合は、.labelsHidden()を使って標準ラベルを非表示にすると良いです。
非表示になった標準ラベルですが、VoiceOverによるスクリーンリーダーでは有効ですので、適切な文言をいれて残しておきましょう。
こちらは、独自ラベルを回転ホイールの上部に表示させるサンプルです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
struct ContentView: View { @State private var departureDate = Date() var body: some View { VStack { /// ラベル HStack { Image(systemName: "airplane") Text("出国日時") } .font(.title) /// DatePicker DatePicker("出国日時", selection: $departureDate) .labelsHidden() } } } |
Formでの使用
DatePickerはフォームで使用すると、次のように折りたたみ表示となり、クリックするとはじめて回転ホイールがその場に現れます。
Pickerと違い画面遷移はしませんので、NavigationViewは必須ではありません。
|
1 2 3 4 5 6 7 8 9 10 |
struct ContentView: View { @State private var selectionDate = Date() var body: some View { Form { DatePicker("日時を選択", selection: $selectionDate) } } } |
なお、次のように.datePickerStyle()を付加すると、Form内でも折りたたみ表示の代わりに、回転ホイールスタイルにできます。
|
1 2 3 4 5 6 7 8 9 10 11 |
struct ContentView: View { @State private var selectionDate = Date() var body: some View { Form { DatePicker("日時を選択", selection: $selectionDate) .datePickerStyle(WheelDatePickerStyle()) // 回転ホイールスタイルを指定 } } } |
DatePickerの設定オプション
DatePickerには、その動作を制御するいくつかの設定オプションが用意されています。
|
1 2 3 |
DatePicker("ラベル", selection: $selection, in: 選択範囲指定, displayComponents: 表示タイプ指定) |
選択範囲指定（in）
引数(in)で選択可能な範囲を指定可能です。
ClosedRange型(開始Date...終了Date）で選択範囲を指定します。
これによりユーザーは範囲外の日時を選択できなくなります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
struct ContentView: View { @State private var selectionDate = Date() var body: some View { // 選択範囲を現在日時から24時間以内に設定 let date1 = Date() let date2 = date1.addingTimeInterval(60 * 60 * 24) return DatePicker("日時を選択", selection: $selectionDate, in: date1...date2) } } |
範囲指定は開始と終了のどちらか片方だけの指定も可能です。
PartialRangeFrom型（date1...)とした場合、現在日時以降が選択可能となり、PartialRangeThrough型（...date1）は、逆に過去の日時のみが選択可能になります。
表示タイプ指定（displayComponents）
選択する日時の要素を配列型で指定します。
指定できる要素は.date（日付）と.hourAndMinute（時刻）の2つのみです。
未指定の場合はデフォルト値である"[.hourAndMinute, .date]"（日付と時刻）が採用されます。
日付のみ
|
1 2 3 4 5 6 7 8 9 |
struct ContentView: View { @State private var selectionDate = Date() var body: some View { DatePicker("日付を選択", selection: $selectionDate, displayedComponents: .date) } } |
時刻のみ
|
1 2 3 4 5 6 7 8 9 |
struct ContentView: View { @State private var selectionDate = Date() var body: some View { DatePicker("時刻を選択", selection: $selectionDate, displayedComponents: .hourAndMinute) } } |
表示言語について
DatePickerの表示言語は、端末の言語設定に依存します。アプリ側で変更はできません。
iPhoneの場合は「設定」>「一般」>「言語と地域」>「iPhoneの使用言語」で設定します。
Xcodeのプレビューで日本語表記にする
Xcodeのプレビューで日本語表記の確認をするには、初期ソースの一番下にあるContentView_Previews構造体に次のような１行追加してプレビュー環境のLocaleをja_JP（日本語/日本地域）に設定します。
|
1 2 3 4 5 6 7 8 |
struct ContentView_Previews: PreviewProvider { static var previews: some View { ContentView() .environment(\.locale, Locale(identifier: "ja_JP")) // 追加 } } |
あわせて読みたい記事
