【SwiftUI】DatePickerの使い方

DatePickerは日付と時間を選択するための専用Viewです。

スポンサーリンク

環境

この記事の情報は次のバージョンで動作確認しています。

【Xcode】11.4.1
【Swift】5.2
【iOS】13.4.1
【macOS】Catalina バージョン 10.15.4

基本的な使い方

テキストタイプのラベルを使う基本的な使い方です。
引数(selection)には、選択値と連携するDate型のプロパティを指定します。
プロパティ値が変更できるように、@State等で宣言されている必要があります。
頭に$が付いているのは、プロパティの値ではなく参照を渡し、DatePickerが値を更新可能にする意味があります。

使用例

基本的な使い方

テキスト以外のラベルを使う場合

ラベルにテキスト以外のViewを使う場合は、次のイニシャライザを使います。

「ラベルを表すView並びを記述」の箇所は、@ViewBuilderで定義されているので、複数のViewを並べて記述できます。
ここ記述されたViewは画面上横並びに配置されます。
VStack()等を使った、レイアウトの指定も可能です。

使用例

テキスト以外のラベルを使う場合

ラベルの自由な配置

DatePickerの標準ラベルはレイアウトの柔軟性に乏しいので、自由にラベルを配置したい場合は、.labelsHidden()を使って標準ラベルを非表示にすると良いです。
非表示になった標準ラベルですが、VoiceOverによるスクリーンリーダーでは有効ですので、適切な文言をいれて残しておきましょう。

こちらは、独自ラベルを回転ホイールの上部に表示させるサンプルです。

ラベルの自由な配置

Formでの使用

DatePickerはフォームで使用すると、次のように折りたたみ表示となり、クリックするとはじめて回転ホイールがその場に現れます。
Pickerと違い画面遷移はしませんので、NavigationViewは必須ではありません。

Formでの使用

なお、次のように.datePickerStyle()を付加すると、Form内でも折りたたみ表示の代わりに、回転ホイールスタイルにできます。

DatePickerの設定オプション

DatePickerには、その動作を制御するいくつかの設定オプションが用意されています。

選択範囲指定(in)

引数(in)で選択可能な範囲を指定可能です。
ClosedRange型(開始Date...終了Date)で選択範囲を指定します。
これによりユーザーは範囲外の日時を選択できなくなります。

範囲指定は開始と終了のどちらか片方だけの指定も可能です。
PartialRangeFrom型(date1...)とした場合、現在日時以降が選択可能となり、PartialRangeThrough型(...date1)は、逆に過去の日時のみが選択可能になります。

表示タイプ指定(displayComponents)

選択する日時の要素を配列型で指定します。
指定できる要素は.date(日付)と.hourAndMinute(時刻)の2つのみです。

未指定の場合はデフォルト値である"[.hourAndMinute, .date]"(日付と時刻)が採用されます。

日付のみ

日付のみ

時刻のみ

時刻のみ

表示言語について

DatePickerの表示言語は、端末の言語設定に依存します。アプリ側で変更はできません。
iPhoneの場合は「設定」>「一般」>「言語と地域」>「iPhoneの使用言語」で設定します。

表示言語について

Xcodeのプレビューで日本語表記にする

Xcodeのプレビューで日本語表記の確認をするには、初期ソースの一番下にあるContentView_Previews構造体に次のような1行追加してプレビュー環境のLocaleをja_JP(日本語/日本地域)に設定します。

Xcodeのプレビューで日本語表記にする

あわせて読みたい記事

【SwiftUI】Pickerの使い方
Pickerは複数の選択肢の中から1つの値をユーザーに選択させる為の部品です。図のような回転ホイール表示が代表的なスタイルですが、プラットフォームによってスタイルが自動的に変わる特徴があります。
【Swift】Dateの使い方
Dateはカレンダーやタイムゾーンに依存しない「特定の時点」を示す構造体です。単体で日時の比較や、時間間隔の計算等が可能ですが、夏時間、閏年、うるう秒、暦法(ユリウス暦やグレゴレオ歴等)等は考慮されませんので、正確に算出する為にはCal...
【Swift】Localeの使い方
Localeは、言語と地域を組み合わせたロケール情報を保持する構造体です。日付や時間、金額、数値等の書式の決定に影響します。