【SwiftUI】DatePickerの使い方

iOS	13.0以上
XCode(当サイトの環境)	15.0.1

DatePickerは、SwiftUIで日付や時間の選択を簡単に実現するためのコンポーネントです。以下は、DatePickerの基本的な使い方を紹介します。

import SwiftUI

struct DateSample: View {
    // Date()で現在の日時を取得
    @State private var dateTime = Date()
    
    // 日付の範囲を定義
    var body: some View {
        DatePicker(
            "Date",   // ラベルを表示
            selection: $dateTime // 日時を格納している変数
        )
    }
}

日本語への対応
選択可能な日付の範囲を指定
日付または時間のみ指定できるようにする
スタイルを変更する
1. graphicalを指定した場合
2. wheelを指定した場合

日本語への対応

DatePickerにenvironmentモディファイアを使うと日本語に対応できます。

        DatePicker(
            "Date",   // ラベルを表示
            selection: $dateTime // 日時を格納している変数
        )
        .environment(\.locale, Locale(identifier: "ja_JP"))

さらに和暦で表示したい場合

        DatePicker(
            "Date",   // ラベルを表示
            selection: $dateTime // 日時を格納している変数
        )
        .environment(\.locale, Locale(identifier: "ja_JP"))
        .environment(\.calendar, Calendar(identifier: .japanese))

選択可能な日付の範囲を指定

以下のようにDatePickerの「in:」に範囲を指定することで、指定した範囲以外を選択できないようにすることができます。

import SwiftUI

struct DateSample: View {
    // Date()で現在の日時を取得
    @State private var dateTime = Date()
    // 日付の範囲を設定しているプロパティ
    private let dateRange: ClosedRange<Date> = {
        let calendar = Calendar.current
        let startComponents = DateComponents(year: 2023, month: 9, day: 3) //範囲の開始日時
        let endComponents = DateComponents(year: 2023, month: 9, day: 10, hour: 23, minute: 59, second: 59) //範囲の終了日時
        return calendar.date(from:startComponents)!
            ...
            calendar.date(from:endComponents)!
    }()
    
    // 日付の範囲を定義
    var body: some View {
        DatePicker(
            "Date",   // ラベルを表示
            selection: $dateTime, // 日時を格納している変数
            in: dateRange // 範囲を指定している変数
        )
        .environment(\.locale, Locale(identifier: "ja_JP"))
    }
}

日付または時間のみ指定できるようにする

引数である「displayedComponents:」を指定することで、「日付のみ」または「時間のみ」表示することもできます。

コード例では日付のみ表示していますが、「.date」の代わりに「.hourAndMinute」を指定すると時間のみ表示することもできます。

        DatePicker(
            "Date",   // ラベルを表示
            selection: $dateTime, // 日時を格納している変数
            displayedComponents: [.date] // 日付のみ表示する指定
        )

スタイルを変更する

DatePickerの表示スタイルを変更してみます。モディファイアの「.datePickerStyle」で変更することができます。

graphicalを指定した場合

        DatePicker(
            "Date",   // ラベルを表示
            selection: $dateTime // 日時を格納している変数
        )
        .datePickerStyle(.graphical)

wheelを指定した場合

        DatePicker(
            "Date",   // ラベルを表示
            selection: $dateTime // 日時を格納している変数
        )
        .datePickerStyle(.wheel)