公開日：2020/08/24
更新日：2020/09/03

【SwiftUI】DatePickerで、日時選択用のUIを実装する方法を解説

SwiftUIでは、DatePickerを使用することで、ユーザーに日時を選択してもらうUIを実装することができます。

本記事では、DatePickerの基本的な実装方法と、選択範囲や表示タイプを指定する方法について解説致します。

DatePickerの実装

DatePickerのイニシャライザには、文字列をラベルとするものと、カスタムビューをラベルとするものがあります。

文字列をラベルとする実装

文字列をラベルとするDatePickerは、以下のように実装します。

DatePicker("文字列", selection: $selectiedDate)

第１引数には、DatePickerのラベルとして表示する文字列を指定します。

第２引数のselection:には、日時を示すプロパティを指定します。プロパティはBinding<Date>型なので、@Stateで宣言する必要があります。

以下は、DatePickerで選択された日時が、Textに表示されるサンプルコードです。

カスタムビューをラベルとする実装

カスタムビューをラベルとするDatePickerは、以下のように実装します。

DatePicker(selection: $selectiedDate) {
    カスタムビュー
}

「カスタムビュー」の部分に、ラベルとして表示するViewを自由に実装できます。

以下は、画像とテキストを一緒にしたカスタムビューをラベルとした、DatePickerのサンプルコードです。

続いて、DatePickerのラベルを非表示にする方法を紹介致します。ラベルを非表示にするには、labelsHidden()を実装します。

以下は、DatePickerのラベルを非表示にし、代わりに、DatePickerの上に、Textで説明文を表示するよう実装したサンプルコードです。

DatePickerは、選択範囲の制限や、日付のみ表示などの表示タイプを指定することもできます。

選択範囲を制限するには、イニシャライザに、in range: ClosedRange<Date>を追加します。

以下は、DatePickerの選択可能範囲を、3日前から3日後までに制限したサンプルコードです。

制限外の日時を選択しようとすると、自動で制限内に戻ります。

表示タイプを指定するには、イニシャライザに、displayedComponents: DatePicker<Label>.Componentsを追加します。

日付のみを指定する場合は.date、時間のみを指定する場合は.hourAndMinuteを指定します。

デフォルトでは、[.hourAndMinute, .date]が指定されているため、日付と時間の両方が表示されております。

以上、DatePickerの実装方法についてでした。