DatePickerで24時間表示にする
概要
DatePickerでdisplayedComponentsを.hourAndMinuteにする事で時間のみ表示することができますが、その際に以下のように24時間表示をする方法を紹介します。
環境
この記事は以下のバージョン環境のもと作成されたものです。
【Xcode】15.2
【iOS】17
DatePicker
基本的な書き方はDocumentのサンプルコードにある通り、 DatePickerに対してtitleKeyとselectionを定義することで日付や時間の選択ができるコンポーネントを表示することができます。
またdisplayedComponentsで日付のみや時間のみを表示するコンポーネントに変更することが可能です。
@State private var date = Date()
var body: some View {
DatePicker(
"Start Date",
selection: $date,
displayedComponents: [.date]
)
}
この日付や時間に関して、何もしなければOSの言語設定に準拠した形で表示されます。
| ja | en | zh |
|---|---|---|
 |
 |
 |
今回はこの時間の部分に関してデバイス側の言語設定に関係なく24時間表示する方法を紹介します。
localeで24時間表示がデフォルトの言語を指定する
.environmentmodifierを使用することでViewに環境値を注入することができます。
例えば以下のコードをViewに対して付与することでlocaleを指定することができます。
.environment(\.locale, Locale(identifier: "ja-JP"))
これを利用してデフォルトが24時間表示の言語を指定することで実装することができます。
例)
.environment(\.locale, Locale(identifier: "ja"))
.environment(\.locale, Locale(identifier: "de"))
.environment(\.locale, Locale(identifier: "fr"))
.environment(\.locale, Locale(identifier: "it"))
.environment(\.locale, Locale(identifier: "zh"))
などなどです。
DatePicker( ... )
.environment(\.locale, Locale(identifier: "ja"))
これで24時間表示されます。
Localeで国を指定してない（JPとかUSとか）ですが、これには二つ理由があります。
まず一つ目はzhのような言語に対して国（地域）コードが複数ある場合は12時間表示になることがあります。
例えばzh-CNでは24時間表示ですが、zh-TWでは12時間表示となります。
これは時間に関する表示が言語だけでなく国（地域）も関連しているためです。
二つ目に国（地域）コードを定義することでデバイス側の設定が反映されてしまうことです。
ja-JPなど一見良さそうに見えますが、デバイス側で24時間表示[1]のトグルをOFFにすると12時間表示になります。
NSLocale.systemを使用する
.environment(\.locale, NSLocale.system)で24時間表示することが可能です。
NSLocale.systemに関してgeneric root valuesとDocumentに記載があります。
このgeneric root valuesは特定の言語や地域に依存しない基本的な設定でその際の時間表示が24時間設定になっているようです。
よって.environment(\.locale, NSLocale.system)で24時間表示されるようです。
個人的にはこちらの実装方法のが良い認識で、とくに
Use the system locale when you don’t want any localizations.
つまり「ローカライズを必要としない場合は、システムロケールを使用します」とあるので特段言語指定が不要な場合はNSLocale.systemを用いた実装で問題かと思います。
最後に
以上DatePickerで24時間表示にする方法の紹介でした。
-
この記事を執筆した時点ではシミュレーターの設定で24時間表示のトグルは表示されません。 ↩︎
Discussion