【SwiftUI】DatePickerの使い方!ロケールを日本語設定にする方法

この記事からわかること

  • SwiftUIDatePickerとは?
  • 日付カレンダーから選択する方法
  • 日付や時間のみを表示させるには?
  • 選択可能な日付範囲指定する
  • ロケール日本語にする
  • 西暦和暦への変更方法
  • 日付のフォーマットを変更する
  • カレンダーのデザインを変更する
  • カレンダーの文字色背景色を変更する

index

[open]

\ アプリをリリースしました /

みんなの誕生日

友達や家族の誕生日をメモ!通知も届く-みんなの誕生日-

posted withアプリーチ

SwiftUIで日付をカレンダーから選択する方法

SwiftUIで日付をカレンダーから選択する方法

SwiftUiで上記のようなカレンダーから日付を選択するビューを構築するにはDatePicker構造体を使用します。

struct DatePicker<Label> where Label : View

まずは基本的でシンプルなイニシャライザを使用した表示方法です。

使用例

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

selectionには選択された日付を格納するための変数をバインディングします。初期値には当日の日時を格納するためにDate構造体のインスタンスを格納しておきます。labelには表示させたいテキストをビュー構造体を使って渡します。

DatePickerの表示を日付や時間だけに変更する

SwiftUIで日付をカレンダーから選択する方法

DatePicker構造体はデフォルトでは日付と時間が両方表示されています。これを日付のみや時間のみに変更したい場合は先ほどとは別のイニシャライザを使用します。

日付だけを表示させる

displayedComponentsに表示させたい部分の任意の値を渡します。日付であればdateを渡します。

struct ContentView: View {
    @State  var selectedDate:Date = Date()
    var body: some View {
        VStack {
            DatePicker("Date", 
              selection: $selectedDate, 
              displayedComponents: [.date]
            )
        }
    }
}

時間だけを表示させる

時間だけであればhourAndMinuteを渡します。

struct ContentView: View {
    @State  var selectedDate:Date = Date()
    var body: some View {
        VStack {
            DatePicker("Date", 
              selection: $selectedDate, 
              displayedComponents: [.hourAndMinute]
            )
        }
    }
}

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

【SwiftUI】DatePickerの使い方!選択可能な日付の範囲を指定する

DatePicker構造体はデフォルトでは日付の選択範囲は無制限となっています。この範囲を自分で明示的に指定するにはinを含んだイニシャライザを使用します。

inには選択可能にしたい日付の範囲ClosedRange型で渡します。なので最初に日付の範囲(計算プロパティdateRange)を定義しておきます。

現在から3日の範囲のみ指定可能にする

struct ContentView: View {
    @State  var selectedDate:Date = Date()
    
    let dateRange: ClosedRange<Date> = {
        let calendar = Calendar.current
        let start = calendar.date(byAdding: .day, value: -3, to: Date())!
        let end = calendar.date(byAdding: .day, value: 3, to: Date())!
        return start...end
    }()
    
    var body: some View {
        VStack {
            DatePicker("Date",
                selection: $selectedDate,
                in: dateRange,
                displayedComponents: [.date]
            )
        }
    }
}

ClosedRange型とは?

ClosedRange値の範囲を定義するための構造体です。...を使用して最小値と最大値を定義するとその間の値を含んだ範囲を含んだClosedRange型が生成されます。

let numRange:ClosedRange<Int> = 0...5

今回は範囲のデータ型をClosedRange<Date>としているので日付型の範囲を定義しています。

ローケルを日本語に変更する

DatePicker構造体はデフォルトでは英語で表記されたカレンダーとなっています。これを日本語に変更するにはenvironmentモディファイアでlocaleを指定して明示的に日本を指定します。

VStack {
    DatePicker("Date",
          selection: $selectedDate,
          in: dateRange,
          displayedComponents: [.date]
    ).environment(\.locale, Locale(identifier: "ja_JP"))
}

和暦に変更する

DatePicker構造体はデフォルトでは西暦で表記されたカレンダーとなっています。これを和暦に変更するにはenvironmentモディファイをでcalendarを指定して使用して明示的に和暦を指定します。

【SwiftUI】DatePickerの使い方!ローケルを日本語に変更する
VStack {
    DatePicker("Date",
                selection: $selectedDate,
                in: dateRange,
                displayedComponents: [.date]
    ).environment(\.locale, Locale(identifier: "ja_JP"))
    .environment(\.calendar, Calendar(identifier: .japanese))
}

DateFormatterで日付の表示形式を変更する

選択された日付をそのまま表示させようとすると以下のような形式になってしまいます。

struct ContentView: View {
    @State    var selectedDate:Date = Date()
    var body: some View {
        VStack {
            DatePicker(selection: $selectedDate, 
              label: { Text("Date") }
            ).padding()
            Text("\(selectedDate)")
        }
    }
}
2022年9月19日 月曜日 午後3:22:09 日本標準時

これでは見た目が良くないので日付の表示形式をDateFormatterを使って任意の方法に変更していきます。

yyyy/MM/dd形式で表示する

struct ContentView: View {
    @State    var selectedDate:Date = Date()
    
    var df:DateFormatter{
        let df = DateFormatter()
        df.dateFormat = "yyyy/MM/dd"
        df.locale = Locale(identifier: "ja_JP")
        return df
    }
    
    var body: some View {
        VStack {
            DatePicker(selection: $selectedDate,
                      label: { Text("Date") }
            ).padding()
            Text("\(df.string(from: selectedDate))")
        }
    }
}
2022/9/19

詳細な使用方法に関しては以下の記事を参考にしてください。

カレンダーのデザインを変更する

デフォルト設定ではカレンダーが表示され日付を選択できるようになっていますが、datePickerStyleモディファイアを使用することでデザインを変更することができます。引数にはDatePickerStyle型の値を指定します。

automatic

.datePickerStyle(.automatic)
【SwiftUI】DatePickerの使い方!カレンダーのデザインを変更する

wheel

.datePickerStyle(.wheel)
【SwiftUI】DatePickerの使い方!カレンダーのデザインを変更する

graphical

.datePickerStyle(.graphical)
【SwiftUI】DatePickerの使い方!カレンダーのデザインを変更する

compact

.datePickerStyle(.compact)
【SwiftUI】DatePickerの使い方!カレンダーのデザインを変更する

ラベルを非表示にする

設定しているラベルを非表示にするには.labelsHidden()を指定します。

struct ContentView: View {
    @State  var selectedDate:Date = Date()
    var body: some View {
            DatePicker(selection: $selectedDate, 
                label: { Text("Date") }
            ).padding()
        }
    }
}

文字色を変更する(graphical)

【SwiftUI】DatePickerの使い方!カレンダーのデザインを変更する

カレンダーや選択する文字色を変更するにはaccentColorを使用します。この方法はgraphicalの場合は有効ですが、compactwheelの場合は変更できません。

struct ContentView: View {
    @State  var selectedDate:Date = Date()
    var body: some View {
        DatePicker(selection: $selectedDate,
                label: { Text("Date") }
        ).datePickerStyle(.graphical)
            .accentColor(.orange)
    }
}

compact/wheelの文字列を変更する

【SwiftUI】DatePickerの使い方!カレンダーのデザインを変更する

compactwheelの場合はcolorInvertcolorMultiplyを使用することで変更できます。

@State  var selectedDate:Date = Date()
    var body: some View {
        DatePicker(selection: $selectedDate,
                label: { Text("Date") }
        ).datePickerStyle(.wheel)
            .colorInvert()
            .colorMultiply(.orange)
    }
}

背景色を変更する

【SwiftUI】DatePickerの使い方!カレンダーのデザインを変更する

背景色を変更するにはbackgroundを使用します。選択されている日付部分は変化しないので注意してください。

struct ContentView: View {
    @State  var selectedDate:Date = Date()
    var body: some View {
        DatePicker(selection: $selectedDate,
            label: { Text("Date") }
        ).datePickerStyle(.graphical)
            .background(Color.orange)
            .accentColor(.gray)
    }
}

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。

searchbox

スポンサー

ProFile

ame

趣味:読書,プログラミング学習,サイト制作,ブログ

IT嫌いを克服するためにITパスを取得しようと勉強してからサイト制作が趣味に変わりました笑
今はCMSを使わずこのサイトを完全自作でサイト運営中〜

New Article

index