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

この記事からわかること
- SwiftUIのDatePickerとは?
- 日付をカレンダーから選択する方法
- 日付や時間のみを表示させるには?
- 選択可能な日付範囲を指定する
- ロケールを日本語にする
- 西暦や和暦への変更方法
- 日付のフォーマットを変更する
- カレンダーのデザインを変更する
- カレンダーの文字色や背景色を変更する
index
[open]
\ アプリをリリースしました /
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の表示を日付や時間だけに変更する

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]
)
}
}
}
選択可能な日付の範囲を指定する

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
を指定して使用して明示的に和暦を指定します。

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)

wheel
.datePickerStyle(.wheel)

graphical
.datePickerStyle(.graphical)

compact
.datePickerStyle(.compact)

ラベルを非表示にする
設定しているラベルを非表示にするには.labelsHidden()
を指定します。
struct ContentView: View {
@State var selectedDate:Date = Date()
var body: some View {
DatePicker(selection: $selectedDate,
label: { Text("Date") }
).padding()
}
}
}
文字色を変更する(graphical)

カレンダーや選択する文字色を変更するにはaccentColor
を使用します。この方法はgraphical
の場合は有効ですが、compact
やwheel
の場合は変更できません。
struct ContentView: View {
@State var selectedDate:Date = Date()
var body: some View {
DatePicker(selection: $selectedDate,
label: { Text("Date") }
).datePickerStyle(.graphical)
.accentColor(.orange)
}
}
compact/wheelの文字列を変更する

compact
やwheel
の場合はcolorInvert
とcolorMultiply
を使用することで変更できます。
@State var selectedDate:Date = Date()
var body: some View {
DatePicker(selection: $selectedDate,
label: { Text("Date") }
).datePickerStyle(.wheel)
.colorInvert()
.colorMultiply(.orange)
}
}
背景色を変更する

背景色を変更するには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)
}
}
まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。
ご覧いただきありがとうございました。