【SwiftUI】カレンダー日付選択(DatePicker)の使用方法と種類

本記事ではデートピッカーと言われる日付選択の使用方法と実装について解説していきます。

1. DatePickerとは
2. DatePickerの設置
3. DatePickerの設定値
4. カレンダー表示形式の種類
5. まとめ

DatePickerとは

DatePickerは、その名の通り日付の選択をすることができる機能です。主に入力項目をクリックするとカレンダーが表示されてそこから日付を選択するスタイルが一般的です。

DatePickerの設置

viewsライブラリからDatePicker()をソースコードにドラッグ&ドロップすることで設置することができます。

viewsライブラリは、Xcodeの右上にある+ボタンをクリックするかショートカット「shift+command+L」を押すことで開くことができます。

配置されるソースコード

DatePicker(selection: .constant(Date()), label: { Text("Date") })

DatePickerの設定値

DatePickerの基本表示に使用する設定値には、selection,labelがあります。各設定値について解説します。

selectionには、現在選択されている日時の情報が入ります。データ型としては、日付型の@State変数を設定します。

DatePicker()はselectionのパラメータにバインディング型のデータを要求しているため、変数の値を監視してviewを再描画できる@State変数を定義し、その変数に「$」をつける形でパラメータを渡します。

labelには、カレンダーにつけるラベルの表示名を指定します。現在の日時なのか、スケジュールに使用するための日時なのか、実装するアプリケーションの用途に合わせて指定できます。

設定値をそれぞれ設定した場合のソースコードは以下のようになります。

    @State var selectedDate = Date()
    var body: some View {
        VStack {
            DatePicker(selection: $selectedDate, label: { Text("日時情報") })
        }
        .padding()
    }

実行結果

画面に表示された日付、時間のピッカーをクリックすると選択できるカレンダーが表示されます。任意の日付を選択すれば日が変わり、矢印を押すことで月も変更できることが確認できます。

また、初期値で設定しているDate()は現在日時を取得することができます。

カレンダー表示形式の種類

カレンダーの表示形式を4つほどご紹介します。これらの4つの表示方法を覚えておけばある程度の場面で問題なくカレンダー機能を組み込むことができます。

カレンダーを日本語で表示

カレンダーを日本語に変更するにはenvironment()を使用します。

environment()の設定値にロケールという国や言語の設定を行う値を渡します。ここに日本を意味する”ja_JP”を設定することでカレンダーを日本語表記にすることができます。

DatePicker(selection: $selectedDate, label: { Text("日時情報") })
                .environment(\.locale, Locale(identifier: "ja_JP"))

表示結果

localを未設定だった場合には英語で表示されていた年月日、曜日の表示が日本語になっていることが確認できました。

カレンダーを和暦で表示

カレンダーの年月を令和、平成、昭和などの和暦を用いて表示することもできます。

年月の表記を和暦に変更するには、日本語に変更する際と同様にenvironmentを使用します。設定値にはcalendarを用います。

DatePicker(selection: $selectedDate, label: { Text("日時情報") })
                .environment(\.locale, Locale(identifier: "ja_JP"))
                .environment(\.calendar, Calendar(identifier: .japanese))

表示結果

日付だけを表示

ここまでご紹介してきた内容では日付のカレンダーと時間を選択する項目が両方表示されてきましたが、日付だけを表示することもできます。

日付のみを表示させるためにはDatePickerにdisplayedComponentsをパラメータとして渡します。displayedComponentsにdateを指定することで時間を非表示にしてカレンダーのみを表示することができます。

DatePicker(selection: $selectedDate, displayedComponents: .date, label: { Text("日付情報") })
                .environment(\.locale, Locale(identifier: "ja_JP"))

表示結果